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!
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.
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()">
Related
I'm building a portfolio site; it's a one pager with a lightbox functionality. So, basically I am showing HTML5 ads I have built, which I am embedding in an iFrame. These ads have audio, so when I close out of the lightbox the audio continues to play. Now I have tried different methods but have been unsuccessful. I have tested one method which worked, where I removed the src of the iFrame (ONE iFrame which I assigned an ID). Like so:
**HTML:**
<iframe id="test" class="iframe-src" src="media/rogue-nation/300x250-progressive-post/index.html" width="300" height="250" style="border:none"></iframe>
**JavaScript:**
var test;
var lightbox;
test = document.getElementById('test');
lightbox = document.getElementById('lightbox');
lightbox.addEventListener("click", closeLightbox, false);
function closeLightbox() {
...
test.src = "none";
}
So...my questions are:
What is the "best" way to apply this method to each iFrame depending on which one was interacted with (tried, getElementsByClassName but was unsuccessful)
Is there a way to disable the scripts within an iFrame so I don't have to use this method, as I am not so crazy about it
Also, please don't post jQuery solutions or advise me to use jQuery, as it will not be helpful because I am writing plain JavaScript
Thanks in advance!
If your iframe content lives on the same domain it is easy. You could do something like this when your lightbox closes:
function closeLightbox() {
// get the iframe which is playing audio
var iframe = document.getElementById('iframe');
// make sure you can reference the audio element on the iframe
// e.g. with an id.
var sound = iframe.contentWindow.document.getElementById('sound');
sound.pause();
sound.currentTime = 0;
// then close the lightbox with some other code
// ...
}
JSBin Demo
I am working on an HTML5 facebook game (inside facebook canvas iframe) in which I use jquery in addition to some other js files, css files (image files, in the css files), font files, sound files and screens (html divs in seperate files).
I want to have a loading script as the size of the resources is around 1 MB. There are two options;
first one is writing a resource loader and load everything in correct order which really is painful.
second one is first having a simple loading screen at startup, which will be quicly loaded, upon loading this page, starting to load the actual html (with js, css and everyting) and handing over the loading process to the browser client.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function iframeIsLoaded()
{
...
}
</script>
</head>
<body>
<div id="loadingScreen" class="..."> <!-- iframe will be under this div -->
...
</div>
<iframe ...>
</iframe>
...
obviously second option is much better but I don't have a clue how to do it. As shown above, I may use an iframe under the loading screen div but is there a way to send a message to the upper div from the iframe?
I am also open to other solutions!
You can do this using the iframe.load event.
What you will want to do is hide the iframe on page load and show the loading screen, then you want to wait until the content is loaded then Show the frame and hide the Loading screen.
(This example assumes you are using the src attribute of the IFrame to load the content)
Pure Javascript : Example JSFiddle
var frame = document.getElementById('iframeID');
var loading = document.getElementById('loadingScreen');
frame.style.display = 'none';//Originally hide the frame
loading.style.display = 'block';//Originally show the Loading Screen
frame.src = 'http://www.bing.com';//Set the src attribute
frame.onload = function() {
frame.style.display = 'block';//Show the frame after it is loaded
loading.style.display = 'none';//Hide the loading screen
}
EDIT : (Removed jQuery Example and Added a new Example based on Comment)
Here is a new example that checks the child page for the variable done to check if it is set to true.
Warning this example has the potential to not work due to Cross-Domain Scripting Security, this should only be used if you are 100% that both pages are on the same Domain
Child Page :
var done = false;
setTimeout(function () {
done = true;
}, 10000);
Parent Page : (Script needs placing after the HTML / Before the end of the Body Tag ())
<div>
<div id="loading">
Loading...
</div>
<iframe id="iframeID"></iframe>
</div>
<script type="text/javascript">
var frame = document.getElementById('iframeID');
var loading = document.getElementById('loading');
frame.style.display = 'none'; //Originally hide the frame
loading.style.display = 'block'; //Originally show the Loading Screen
frame.src = 'Test2.aspx'; //Set the src attribute
frame.onload = function () {
console.log('Loaded Frame');
}
var $interval = setInterval(CheckFrameDone, 500);
function CheckFrameDone() {
var done = frame.contentWindow.done;
console.log(done);
if (done) {
console.log('Frame is Finished Loading');
frame.style.display = 'block';
loading.style.display = 'none';
clearInterval($interval);
} else {
console.log('Still Waiting...');
}
}
</script>
With the second example you will notice that every 500 Milliseconds the parent page will check the child page for the done value, if it is true it will show the frame and clear the interval. Otherwise it will just continue to check.
I am developing a Web 3D app and I produced some code in Javascript that implements the following tag to an external .html file with the model in it, within an iframe.
In the <appearance> element in the X3D code block of the external .html file:
<texture id="XXX" repeats="true" repeatt="true" url="" scale="true"
hidechildren="true">
<img src="" attr=".../BMW.jpg" style="display: none; visibility: hidden;">
</texture>
Javascript code that places the above code in the appropriate block in the iframe after I click on a button:
ogl = true;
function toggleTexture(){
if (!ogl) {
var t = document.createElement("Texture");
t.setAttribute("id", "XXX");
t.setAttribute("repeatS", "true");
t.setAttribute("repeatT", "true");
var imgElement = document.createElement("img");
imgElement.setAttribute("src", "../HomeFurniture/assets/BMW.jpg");
t.appendChild(imgElement);
var iframe = document.getElementById("frame");
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
innerDoc.getElementById("anApp").appendChild(t);
innderDoc.x3dom.reload();
} else {
var iframe = document.getElementById("frame");
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
var ot = innerDoc.getElementById("anApp");
ot.removeChild(innerDoc.getElementById('XXX'));
}
return false;
}
The result in the debugging of Chrome browser shows that the piece of code needed is inserted, but the actual model is not updated with the appropriate texture.
There must be something that I miss, but I cannot find the solution. Any help would be appreciated.
FIXED: The problem was Google Chrome. I tested the Web app in Mozilla Firefox and everything works :)
Additionally, I tried the Javascript code in the child html file and it works in Chrome. It just refuses to work when the parent html file load the child html file within an iframe block.
I have this function in javascript :
function loadPage (url){
showLoadPageGif(); // visibility On
document.location.href = getPath + "/" + url ;
}
When I use this function , GIF image is displayed in the screen but not working .
someone has fought before, with this problem ? thnx
i recently ran into this issue using animated SVGs as background-images in pseudo elements. I purposefully put in a large delay on my webserver so i could stay on the current page after window.location = url; It was weird that all other CSS animations and hovers still worked, but the SVG cog just stuck.
After some playing around i found that the animations continued to run if, instead of changing window.location, i submitted a GET form.
var url;
//load & setup loading animation
//then generate and submit form with a slight delay
setTimeout(function(){
var new_form;
new_form = document.createElement('form');
new_form.method = 'GET';
new_form.action = url;
document.body.appendChild(new_form);
new_form.submit();
}, 100)
tested on safari 5.1, firefox 24, chrome 32
I assume you mean "GIF animation stops".
This is the correct behavior. Since you go to a new page, all resources for the old page are freed. This of course includes the GIF itself.
You don't "see" this happening because the browser doesn't waste any time rendering a blank page when you assign location.href.
What you need to do is use an AJAX to request the new page and then replace the whole DOM with the new one in the success handler.
There is a bug in IE6 which stops the animations when you start an AJAX request; to fix that, just assign the src attribute of the image again (i.e. img.src = img.src;) to restart them.
Which browser you're using ? I needed to do the same one time if you're using IE just do this :
var loadingFigure = $('#myImage');
var html = loadingFigure.html();
window.location.href = 'myImage';
loadingFigure.html(html);
For firefox is more complicated you need to use an iframe and do something like this :
<iframe id="myIframe" src="/images/busy.gif" scrolling="no" frameborder="0"></iframe>
$('#myIframe').attr('src', '/images/busy.gif');
window.location.href = 'mylocation'
$('#myIframe').attr('src', '/images/busy.gif');
I have the following piece of code that should dynamically load an iframe with the Google homepage as an example. The iframe gets created but the src is not loaded:
var theIframe2 = document.createElement("iframe");
theIframe2.setAttribute("id", "main-iframe2");
theIframe2.setAttribute("src", "http://www.google.co.uk");
theIframe2.style.width = "300px";
theIframe2.style.height = "200px";
theIframe2.style.position = "absolute";
theIframe2.style.top = "0px";
theIframe2.frameBorder = 1;
var containerDiv2 = document.getElementById('container');
containerDiv2.appendChild(theIframe2);
It's also on jsfiddle here: http://jsfiddle.net/JxhFE/1/
Any advice would be appreciated.
Thanks,
Colin.
You can't show google.co.uk in an IFrame in your domain. Due to security reasons Google only allows it's homepage to be embedded from the same origin. (X-Frame-Options SAMEORIGIN header.)