My basic code looks like this:
<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>
$("#iFrame1").load(function () {
// display iFrame1, hide iFrame2
// set timeout to load next page
});
$("#iFrame2").load(function () {
// display iFrame2, hide iFrame1
// set timeout to load next page
});
I have a set list of pages (same domain, no problems with being displayed inside an iFrame) that are to be displayed in the iFrames (only 1 iFrame is visible at a time), looping through on an interval of 30 minutes (the pages are displaying sporting results).
Basically the way this works is that the src of iFrame 1 is set using $("#iFrame1").attr("src", "<new_url>");. Once the page has fully loaded, the load function triggers and displays iFrame1, hiding iFrame2. A timeout function is then set to load the next page into iFrame2, which will trigger the load function and display iFrame2, hiding iFrame1. It has been done this way so that the loading of the page isn't visible to the user, the iFrame is only made visible once the page has finished loading which gives a smooth transition between pages.
This all works fine! The problem is that one of the pages is set to reload itself (location.reload(true);) at a specific time of the day, and I have no control over that page. Problem here is that the reload of that page also triggers the load function of that iFrame, which causes that iFrame to be incorrectly hidden.
My question is, is there a way to differentiate between the actual src of an iFrame changing, compared to just the content of the iFrame being reloaded (and the src staying the same)? I have had a look at document.referrer, but that gives me nothing.
I ended up solving my issue by adding a check to the load function of each iFrame to check if the iFrame is already visible or not. Only do the swap if the iFrame isn't currently visible..
<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>
$("#iFrame1").load(function () {
// If iFrame 1 is hidden, show it
if($("#iFrame1").css("display") == "none")
{
// display iFrame1, hide iFrame2
// set timeout to load next page
}
});
$("#iFrame2").load(function () {
// If iFrame 2 is hidden, show it
if($("#iFrame2").css("display") == "none")
{
// display iFrame2, hide iFrame1
// set timeout to load next page
}
});
Related
I want to display a loading.gif when my iframe gets loaded.
I did that with the code I found here: Show a loading gif while iframe page content loads
This works. But on my website, I have checkboxes and radio buttons. When the user clicks on one of them, the iframe changes it's source and gets refreshed. The problem is, that the loading symbol is only visible when the whole page loads, not when the iframe changes it's source and get's refreshed. How can I fix that?
<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
code from Jay, view full answer here
I haven't tested this but as far as i know, the jQuery on("load") event triggers whenever an iframe is reloaded. So instead of using onload as an attribute, use this:
$("#frameId").on("load", function () {
console.log("reloaded"); // Here you can display the loading.gif file
})
So, I've tried to googling for it, but seems like that it is not my strongest part.
Example: I have a div with embed a video inside, but to show that video I have to click first on div which opens and shows the video. The problem is that it loads on pageload. It makes browser lags while there is more than 4-5 of those div with videos. How can I make it to not load withing pageload, but only when a div is clicked and unload its content when it is clicked again.
$('.cont').hide();
$('h4').click(function () {
var $answer = $(this).next('.cont');
if ($answer.is(':hidden')) {
$answer.show();
} else {
$answer.hide();
}
});
This is what I have, but it is not as I described it
<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
Load
Unload
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>
this loads/unloads the iframe. While your code just hides it, this completely loads/nloads it.
I am struggeling with the following problem:
I want to stop a div from loading at the page startup. I've got the content inside the div file in an extra folder which is secured with an htaccess+htusers file.
So atm the htaccess question starts immediately when the page is loaded, but it should only ask about this permission, when the button is clicked and the folder content should appear.
Is there a possibility to stop a div from loading and force the load with a button or something?
I assume that your popup contains an Iframe to the subdirectory. That being the case, you can delay the loading of that Iframe by omitting (leaving out) the src attribute, and assigning it only when the button to open the popup is clicked.
Start by declaring an empty iframe, like this:
<iframe id="popup1"></iframe>
Then, using jQuery, assign the src attribute to the iframe when a button is clicked:
$('button#openPopup').on('click', function (event) {
// Set the src location
$('iframe#popup1').prop('src', 'http://domain.com/frame-location');
// Now open the popup the way you normally would.
});
You can also store the location in a data HTML5 attribute and recall it from there when the button is clicked:
<iframe id="popup1" data-src="http://domain.com/frame-location"></iframe>
$('button#openPopup').on('click', function (event) {
$frame = $('iframe#popup1'); // Assign the frame
$frame.prop('src', $frame.data('src')); // Set the src location from data attribute
// Now open the popup the way you normally would.
});
So I have this button that when clicked on will send you to the next slide (void(0)). The next slide is an iframe which is loaded only when you click on the button.
Before the iframe is fully loaded, an animated GIF should show up and in turn hide after the content is fully loaded.
In my case, the GIF is never displayed. It's totally blank until the iframe is fully loaded. What is wrong?
Here is the script:
<script type="text/javascript">
function hideLoading() {
document.getElementById('loading').style.display = "none";
document.getElementById('edtwo').style.display = "block";
}
</script>
The button:
<span id="nextBtn1"><a href="javascript:void(0);"
onClick='document.getElementById("edtwo").src="ed2.html";'></a></span>
And the next slide which includes the GIF and the iframe:
<li><div id="loading"><img src="_img/loading.gif" alt="Loading"/></div>
<iframe id="edtwo" onload="hideLoading()";></iframe></li>
The problem is that your iframe is initially displayed (and moreover, added in the DOM tree). Inspite of its empty src attribute it will load empty page and execute onload event handler. So you will have your indicator hidden as a result of calling hideLoading.
As you can see in this exmaple, onload triggers without clicking on link.
You can remove frame from DOM tree and add it when user clicks "Next" button or change .style.display to empty string (to show it) of gif loader at this time.
I have an iframe loaded on my webpage. After a 30 seconds I want to change the source of the iframe to load another site. This works great using jQuery (setTimeout function) but my issue is performance. It takes 15 seconds to load the page into the iframe when I change the source. I'm stuck with a blank screen until the content is loaded. Is it possible to only change the source once the page has loaded? Is there something I can do within jQuery to preload the webpage?
You can write a script like this, to detect when the page (in the iframe) has finished to load :
// Insert iframe in the page
var $iframe = $('<iframe src="http://www.msn.com/"></iframe>').css({
width: '1px',
height: '1px'
}).attr('frameborder', '0').appendTo('body').data('loaded', 'no');
// Function to execute when the page (in the iframe) has finished to load,
// or when the timeout is over
function iframeIsReady() {
if ($iframe.data('loaded') == 'no') {
$iframe.data('loaded', 'yes').css({
width: '800px',
height: '800px'
});
alert('iframe is ready');
}
}
// Detect when the page (in the iframe) has finished to load
$iframe.load(function ($iframe) {
iframeIsReady();
});
// Add an optional timeout
setTimeout(function () {
iframeIsReady();
}, 15000);
I added also a "timeout" of 15 seconds, if the page take too long time to load.
If you use an ajax call to retrieve the content, you can replace the old content with the new content when the new content arrives and the page will not show blank. Depending upon what you're doing, you could look at the jQuery .load() function or just use an ajax call and insert the content yourself.
You will, of course, have to have appropriate same-origin privileges in order to modify the internals of the iframe.
You could have two iframes, in the same place on the page, but one with visibility: hidden, which you pre-load the contents into, then after your 30 seconds, swap them over. Then you change the URL on the formerly visibly one to start it loading the new URL into it - and repeat.