Javascript code to detect loss of internet connectivity

Posted on 2004-11-19
Last Modified: 2010-08-05
I am writing a web based chat service much like the one here:

My question is this, if you look at that example, it uses a hidden iFrame that auto-refreshes itself then writes any new chat lines it pulls to the main menu, which works great, until the client looses their internet connection. Then the auto-refreshing iFrame turns into a page cannot be displayed error, and no further lines in the chat are displayed since that page is no-longer auto-refreshing. My question becomes what would be the best way to detect that the frame is no longer refreshing and force a reload every 5-10 seconds until the connection resumes itself, then of course the iFrame's own refresh would take over? This has to assume a complete loss of internet connectivity, so I would assume it would be a bit of javascript in the main page that does not auto-refresh, so it would continue to work even if a loss of connectivity is experienced.

Any help in the right direction would be appreciated, thank you!
Question by:NeoGemini
    LVL 3

    Expert Comment

    You can try soemthing like this...create a variable and then get the html of the iFrame.
    var txt = window.frames["youriframe"].innerHTML;
    check the txt variable for "The page cannot be displayed"...if it contains this text, tell the script to refresh, and if not then do nothing. I can see this working in my head, but have no way to test it, so I am not totally sure..
    LVL 63

    Expert Comment

    My idea would be to pleace something at the beginning of every content returned to the iframe, something like a content title.
    If the title is not there, then is the content not comming from the server, then the output should be suppressed and the refresh rate lowered.

    Of course does the title not need to be displayed to the user.

    LVL 3

    Expert Comment

    by:Andrea Ercolino
    you could put the IFRAME content in another invisible container and then copy it to the visible one if it's valid
    LVL 3

    Accepted Solution

    the validity check could be in the content itself... a function call at the end of the body will do
    that function (refreshVisible) should be declared in the main container and should do the following
    1. copy the content of the invisible container to the visible IFRAME --> if there is a page error, then there is no function call, then there is no visible refresh, and no error shown
    2. reset a timer for calling a new function (refreshHidden) in two seconds --> if there is a page error, then there is no function call, then the timer will continue to run and possibly call the refreshHidden function upon expiration
    3. you'll need a check at the beginnig fro preventing execution when called from the visible container rather than the hidden one

    it's just an idea...
    LVL 2

    Expert Comment

    You could have a timer on the main page that checks the value of a variable on the popup. If the variable is there then the window is good. If not then the window is bad then close it.

    Author Comment

    I'm working on these ideas, RAPUTA your idea seems the most promising, can you expand a little on your explanation? I greatly appreciate it!

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now