Basically, how does this work: http://www.stream-hub.com/demo/RealTimeChart/index.html
They are streaming JS through an iframe continuously and the browser window does NOT show the page as "loading". How did they do that? The streaming part is easy, but how do they prevent the browser window from being in a continuous "loading" state?
Thanks!
Figured it out. The idea is to create the iframe programatically like so:
function setupAjax()
{
var iframe = document.createElement("iframe");
iframe.src = "push.php";
iframe.style.display = "none";
document.body.appendChild(iframe);
}
and then.. <body onload="setupAjax()">
Because it is using XMLHttpRequest();. Stream-hub is using long polling method. Surely i'm not enterested with this method because the latency. You can use inline frame. On index.html
function setupAjax()
{
var iframe = document.createElement("iframe");
iframe.src = "push.php";
iframe.style.display = "none";
document.body.appendChild(iframe);
}
function update(data)
{
alert(data);
}
On push.php
<?php
for ( i = 0; i < 10; i++ ) {
echo "<script>window.parent.update('" . i . "')</script>";
sleep(1);
}
?>
But, don't forget this method still need customization. Commontly problem such as, browser always show loading, to avoid this you can use BEHAVIOUR javascript library to call your setupAjax. This script will call your function after all document has been loaded. Don't forget to checkEscape, and stop button.