JSFiddle - React, Tailwind, and code Playground

by Justin Putney

HTML

<h1>Handling Offline iFrame Content</h1>
<section>
<h2>
Using HTML5 srcdoc tag
</h2>
<iframe src="http://google.com/thisfiledoesntexist.html" onerror="$(this).attr('srcdoc','<p>You need to be online to view this content.</p>');" onload="if(navigator.onLine===false) eval(this.getAttribute('onerror'));">
iframes not supported in your browser.
</iframe>
</section>
<section>
<h2>
Replacing the iframe
</h2>
<iframe src="http://google.com/thisfiledoesntexist.html" onerror="$(this).replaceWith('<p>You need to be online to view this content.</p>');" onload="if(navigator.onLine===false) eval(this.getAttribute('onerror'));">
iframes not supported in your browser.
</iframe>
</section>
<section>
<h2>
Using HTML5 srcdoc tag - Without jQuery
</h2>
<iframe src="http://google.com/thisfiledoesntexist.html" onerror="this.setAttribute('srcdoc','<p>You need to be online to view this content.</p>');" onload="if(navigator.onLine===false) eval(this.getAttribute('onerror'));">
iframes not supported in your browser.
</iframe>
</section>
<section>
<h2>
Replacing the iframe - Without jQuery
</h2>
<iframe src="http://google.com/thisfiledoesntexist.html" onerror="var p=document.createElement('p');this.parentNode.replaceChild(p,this);p.innerHTML='You need to be online to view this content.';" onload="if(navigator.onLine===false) eval(this.getAttribute('onerror'));">
iframes not supported in your browser.
</iframe>
</section>

CSS

/* this CSS is not necessary, it's just for the display of the example */
section { display:block;width:49.5%;min-height:200px;float:left;padding:8px;box-sizing:border-box;}
section iframe {width:90%;max-height:100px;}
section h2 { border-bottom:1px solid #999;}