HTML5 Iframe redirect in case checking connection [ EDIT ]

Question

I have an offline html, and I add an Iframe inside it that redirect to a site if there's connection available. but in case if there's no internet connection the Iframe will redirect to offline page/html.

Can someone explain to me what code that I need to use? I'm using checking internet connection script but i don't know what code that I need to insert inside javascript for exchange alert('You are Online') > redirect to online site and alert('You Are Offline') > redirect to offline page

if(navigator.onLine)
  {
    alert('You are Online');
  }
  else
  {
    alert('You are Offline')
  }

<iframe height="500px" width="100%" src="http://example.github.io/" id="foo"></iframe>
<div style="text-align:center"> This Iframe </div>

after end iframe tag you can use noframe tag this link is not working — ANSHUL GERA, Feb 27 '16 at 09:36
http://stackoverflow.com/questions/15273042/catch-error-if-iframe-src-fails-to-load-error-refused-to-display-http-ww — Pekka, Feb 27 '16 at 09:37

Jyothi Babu Araja · Answer 1 · 2016-02-27T11:44:01.330

0

Try something like this

<iframe id="browse" src="" onload="doNothing()" onerror="doRedirect()"></iframe>

And in JavaScript

function doRedirect(){
    document.getElementById('browse').src = "your offline page";
}

or

function doRedirect(){
    window.frames['browse'].location.replace("url to offline page");
}

edited Feb 27 '16 at 11:44

answered Feb 27 '16 at 09:43

Jyothi Babu Araja

10,076
3
31
38

it won't work, after I shut the connection, the Iframe load "Server Not Found" in firefox, not load the offline html/page – Aotsuya Feb 27 '16 at 10:12

score 0 · Answer 2 · answered Feb 27 '16 at 10:36

0

Use can using GlobalEventHandlers.onerror for your fallback. For example:

var my_iframe = document.getElementById('my_iframe');

my_iframe.onerror = (my_iframe.src = 'http://example.com');

<iframe id="my_iframe" src="http://example.xxx/"></iframe>

Or see my fiddle.

answered Feb 27 '16 at 10:36

Tuan Ha

620
2
8
25

How about using "Connection Test" javascript? – Aotsuya Feb 27 '16 at 13:00

HTML5 Iframe redirect in case checking connection [ EDIT ]

2 Answers2