When you are using comet forever iframe techniques, you will see the browser throbber of doom keep spinning and showing progress indicator all the time while loading the iframe data. It is the same in IE, firefox, or webkit based browsers like chrome and safari. In order to overcome the problem, you have to handle differently for different browsers.
Firstly, let’s look at how comet was implemented usually.
Normally, in comet iframe, you will define some call back javascript functions in the parent windows, this are javascript functions that are going to be used to update the contents on the web pages when data are pushed from server. On the server side, the server will push html that contains javascript functions calls back to the client. E.g.
Client Side javascript:
In the comet.js:
var iframe = document.getElementById(this.iframe_id);
if(!iframe)
{
iframe = document.createElement("iframe");
iframe.name = iframe.id = "streaming_frame";
document.body.appendChild(iframe);
}
iframe.style.display = "none";
iframe.src = "http://server/action=subscribe&channel=time";
Once the iframe src has been added, the server client communication has started.
On the server side, there are quite a number of open source package for you to choose.grizzly in glassfish, Jetty, Meteor, Node.JS, just to name a few. The example below assumes that you use glassfish as the server:
PrintWriter writer = response.getWriter();
writer.print("");
writer.flush();
Here we write the following line of javascript back to iframe before we push any other data.
function p(data, div_id){parent.p(data, div_id);}
The reason is that when later the data is pushed to the client, the content of the data can be written as
p("10:50pm", "time")
But actually, p is referring to the parent windows call back method p.
Alright, so this is how basically comet works. The following are hacks to different browsers to stop the browser from spinning.
1. Firefox
In firefox, before you trigger the call back method to update the content, you have to create a temp iframe and attach to the document body, then removes it. By keep doing this before you trigger the event, the browser throbber goes away. The modified p function looks like this:
p(data, div_id) {
firefox_hack();
document.getElementById(div_id).innerHTML = data;
}
function firefox_hack () {
var state = pushPage.engine.state;
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var fake_iframe;
if (fake_iframe == null){
fake_iframe = document.createElement('iframe');
fake_iframe.style.display = 'none';
}
document.body.appendChild(fake_iframe);
document.body.removeChild(fake_iframe);
}
}
