if there is no internet connection, hide iframe

Question

iframe:

<iframe id="iframe" title="Environment Canada Weather" src="" allowtransparency="false" frameborder="0" height="170"></iframe>

jquery:

$( document ).ready(function() {
    window.setInterval(function(){
        if (navigator.onLine) {
            //$("#iframe").show();
            $("#iframe").attr("src", "http://weather.gc.ca/wxlink/wxlink.html?cityCode=on-143&amp;lang=e");
        }
        else{
            $("#iframe").hide();
        }
    }, 5000);
});

I am not able to hide iframe if there is no internet connection. I don't know what's wrong here. Thanks.

Possible duplicate of [Once and for all, what does navigator.onLine do?](http://stackoverflow.com/questions/13076383/once-and-for-all-what-does-navigator-online-do) — Frédéric Hamidi, Nov 21 '13 at 20:53
One way to figure out if you are online: http://stackoverflow.com/questions/2384167/check-if-internet-connection-exists-with-javascript — reto, Nov 21 '13 at 20:53
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine.onLine — Kevin B, Nov 21 '13 at 20:53

score 1 · Answer 1 · answered Nov 21 '13 at 20:52

1

navigator.onLine tells you if the browser is in "offline" mode or not.

It does not actually check if you can reach the net, as you probably think.

(To do this, you could try to ping Google.com with ajax, or do some similar trick)

answered Nov 21 '13 at 20:52

MightyPork

18,270
10
79
133

Is there any way to check it on client side. I don't want to show error message in iframe if there is no internet connection. – user3018980 Nov 21 '13 at 20:53
@user3018980 yes, do what you are currently doing, however keep in mind that the value of navigator.onLine will only update after requesting a remote page or navigating to a new page. – Kevin B Nov 21 '13 at 20:54
1

"In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. In Firefox and Internet Explorer, switching the browser to offline mode sends a false value; all other conditions return a true value." https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine.onLine – showdev Nov 21 '13 at 20:54

score 0 · Answer 2 · answered Nov 21 '13 at 21:25

You could do an ajax request with type:'jsonp' and timeout:3000 (which is three seconds) to the same page you want to include via the frame.

$.ajax({
    type : "GET",
    url : "http://weather.gc.ca/wxlink/wxlink.html?cityCode=on-143&amp;lang=e",
    timeout : 3000,
    dataType : "jsonp",
    crossDomain : true,
    success : function (response, textS, xhr) {
        // never get here
    },
    error : function (xmlHttpRequest, textStatus, errorThrown) {
       if (textStatus === 'timeout') {
          // not reachable
       } else {
          // reachable
       }
    }
});

However, you will always get syntax error, because content of that page is not a script. But browsers usually are able to restore after such errors. UPD. Just tried it with your url, it works.

if there is no internet connection, hide iframe

2 Answers2

Linked