An iFrame lets you embed a website inside of another HTML document. It’s often used to add online content to otherwise offline publications. When a viewer is offline, the iframe fails completely, and the author doesn’t have control of what is displayed.
So how do we go about fixing that?
The onerror Event
Adding an onerror attribute looked like a promising solution…at first…because I was only testing in Firefox.
I tested 2 techniques
- Setting the srcdoc attribute, which lets you apply HTML code as the iframe content.
- Using the jQuery replaceWith method to replace the iframe tag.
Both worked quite well…
…until I tested Chrome and Safari.
Depending on the URL I used, I either got a silent error with an empty iframe, or content generated by the browser.
Adding the navigator.onLine test
Newer browsers (including Chrome and Safari) support the navigator.onLine property. So I added the following onload attribute to the iframe tag.
Since I’m lazy and I don’t like to re-write (and re-writing introduces opportunities for mistakes), if the browser is offline, this will execute the code that was already written for the onerror attribute.
I used the strict equivalence operater (===), as opposed to the equivalence operator (==), to ensure that this would not be triggered if navigator.onLine was undefined, which would be the case in an older browser.
Putting it all together
I purposely wrote the code so that everything could be included with the iframe itself, because many of our in5 customers are pasting the iframe embed code into their InDesign documents for digital publication.
Alternatively, you could write a block of code that handles an entire document full of iframes.
Handling all iframes with a single block of code
Here’s how you would do the same exactly thing, but with a single code block (i.e., not hand-altering every iframe in your document).
$(elem).attr('onerror',"'srcdoc','<p>You need to be online to view this content.</p>');").attr('onload', "if(navigator.onLine===false) eval(this.getAttribute('onerror'));"); }); });
Caution: Using this global technique, you may also want to check to make sure you’re only altering iframes where the src attribute is online content (e.g., contains ://).
Hope that helps you to handle your offline content!
Eureka! More Web Problems Solved
These FREE email lessons will deliver solutions to your inbox over 3 weeks and share techniques with you to solve the toughest of web problems.