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.
Related
I’m wanting to use an AJAX get method to retrieve contents from a page URL. The method works fine, the issue I’m getting is that call returns data before the page is completely loaded
Is there a way I can have the AJAX call only retrieve contents after say 5 seconds for example? (To ensure the page is fully loaded)
You can see on the page below, the page loads and then an additional loading symbol appears which loads the content. I want to retrieve the page data once all content has been loaded
https://pool.pm/addr1qy2465r5axxz92f0rlfyymz5zvsxad2v038slu70qeegm4aac2mvf8qqsgva9exmwhwpxymt896v5anudtr2wee77y6qgudr8k
You can use the onload global event handler. The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
For example
window.onload = function() {
doSomething();
};
And if you need to do the call after 5 secs, do the following
window.onload = function() {
setTimeout(() => {
doSomething();
}, 5000);
};
I have a small digital signage web application where all the pages shown is created in HTML and stored in a database.
I need to make some sort of player that will display all my slides. I have a URL to call that gives me the next page to show: http://example.com/PlayNext This will return the next slide in the given context.
Right now i just have a timeout that will reload the page every 10 seconds. I want to make a much more smooth experience with the player, and load everything from client, without postbacks to server.
So what im thinking is to load the next page in an off screen tag and when thats loaded, slid it into view, and then start loading the next slide off screen. When the show duration has passed, then slide the next page into view and start loading the next one, etc.....
What im wondering is how actually to do this off screen loading thing. I know i can set overflow to be hidden and just place it 3000 px off screen. But how do i make the continuous flow that will allow me to show all the pages i want ?
And a side note - how do i clean up the divs when they no longer should be in use? so that my browser isnt leaking memory?
edit
This is the current "player", it is ASP.NET Razor syntax to show the next page url etc. this is what i want changed to load it in an off screen div:
<script type="text/javascript">
var duration = #ViewBag.Duration;
var nextPage = "#ViewBag.Address";
window.setTimeout(reloadbrowser, duration);
function reloadbrowser()
{
var path = $.ajax({
url: "/page/Ping",
success: success,
error: reloadbrowser,
timeout:5000
});
}
function success()
{
window.location.href = nextPage;
}
</script>
</head>
<body style="height:100%">#Html.Raw(ViewBag.BodyXHTML)</body>
</html>
if the url http://example.com/PlayNext is a url which retrieves the html from the database then these are the steps you should take:
1. you need to get the html from the database using ajax()
2. load that html inside an iframe
3. position that iframe outside of viewport (position:absolute; left:-100%;)
4. after the iframe is loaded, slide it inside the viewport and the old one outside and then remove() the old one
so you'd come up with something like this:
$(function(){
function getData(){
clearTimeout(window.theInterval);
$.ajax({
url: "http://example.com/PlayNext",
type: "POST",
timeout:5000,
success : function (databack) {
var iframe=$('<iframe>'+databack+'<iframe/>', {
style:'position:absolute; left:-100%;',
load:function(){
var that=this;
$(this).animate({
left:0
},500);
$('iframe').not(this).animate({
left:'-100%'
},500,function(){
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
window.theInterval=setTimeout(function(){
getData();
},10000);
},
error:function(jqXHR, status, message){
getData();
}
});
}
getData();
});
NOTE: you must build on this answer to match your project
why use an iframe and not a div
I'm gonna quote some benefits of using an iframe for loading websites inside another one from this answer
1) Iframes implement the cross domain origin policy (images, scripts, and styles do not). This can be useful for pulling in sites / content from other domain names relatively safely. Basically, this allows the advantage of being able to visually show data from other domains without letting them stomp all over your page with unlimited access (like something like JSONP would be able to do).
and the next thing is:
2) You can send multiple types of resources from within an iframe, not just certain mime-types (you're relatively limited to application/javascript, application/x-javascript, text/css, text/xml, image/png, image/jpeg, image/gif with scripts, XHR, images, and sources). For instance, if I want to show you a PDF, I can open an iframe and let the Adobe Reader plugin show you that file. Additionally, in the same domain, if I want to pipeline a script, style, and image all together (inline on the page, image would have to be data URI), I can accomplish this with an iframe (and if it's in the same domain, port, and protocol I can access it with JavaScript as well).
I need a javascript code which loads an image into browser cache. What is the usage? read this:
When the user logs into my site, she/he gets redirected to a page which is "Redirecting you to control panel" and a progress is displayed there too. Now, this "redirector" page has a background, since user experience this page and sees it only 3 seconds, many times, background image is missed and there remains no chance for it to be loaded, since from the page load till the page redirection there is only 3 seconds gap. Here is en example of my ajax login:
$.ajax({
// do ajax stuff
success : function(msg)
{
if(msg==true)
{
// I NEED A FUNCTION HERE TO LOAD THEM IMAGE INTO CACHE BEFORE THIS PAGE
// TO LOAD THE REDIRECTOR PAGE. USING THIS, I CAN ENSURE THE EXISTENCE OF THE
// BG IMAGE WHEN THE USER SEES NEXT PAGE. THIS BG IMAGE IS INDEED NEXT PAGE'S BG
window.locatio.href = 'process/redirection/to/user-panel';
}
}
});
This function will work:
function preloadImage(url)
{
var img = new Image();
img.src = "/test/example.jpg";
}
Also, here is a question that discusses something similar, pre-loading images on a splash screen, but the implementation is far more complex.
On the subject, if you don't have to use JavaScript, another solution using CSS and XHTML that could probably work on the redirect page can be found here. Otherwise, the code at the top should work. Hope this helps, good luck.
I'm looking for a way to load a website and then check after 1 min or so whether the content has changed, if not, repeat. This is because the website I'm trying to get content from contains javascript for loading the div I need. I thought of using some kind of iFrame, but I have no idea where to start and Google isn't helping me.
Edit
This is the code I'm running with atm and scrapUrl is a defined url so don't worry about it:
var iframe = document.body.appendChild(document.createElement('iframe'));
iframe.src = scrapUrl;
$(iframe).ready(function() {
$(iframe).load(function() {
alert('loaded');
alert($(iframe).contents().find('div#description').html());
});
});
It outputs "loaded" and after that "undefined"
So you're doing a lazy load of content in a div, and you want to know when that div has loaded? Depending how you're doing it, you'd be better to set a flag and react to the AJAX "load" event associated with that lazy load.
If you must do it the way you suggest, try this:
Create an interval (setInterval) that checks the load status, or the contents of the div
if false, do nothing. If true, clearInterval.
I have a classic ASP page which is loading an ASP.net page through an iframe inside the ASP page. This is working great except for the fact that it takes a while to load the ASP.net page. The user is left here with unfavorable experience because all they say is an empty blank page until the page is finish loading.
What I would like to do is load an initial "loading" ASP.net page so at least the user is shown something and then when the ASP.net page is ready load the correct ASP.net page into the iframe.
Is this possible? I'm thinking perhaps with a bit of javascript but not 100% sure.
There is no "ASP page" once it hits the browser, there is only the resulting HTML.
You have a few problems here:
1) If you put something in the Iframe, it will be over-written as soon as the new page loads. So, you cannot use what's in the Iframe to display your message.
2) How to tell when the Iframe had loaded
You need to determine the location and size of the Iframe on your page. You need to position an element over it with your message. Modify the style of an absolutely-positioned element to cover the Iframe using JavaScript. Most people would use a framework, such as jQuery, to make it a lot easier.
You then need to detect when the Iframe has loaded and hide this element.
You can use this code to determine that the Iframe has loaded:
function checkIframeLoading() {
// Get a handle to the iframe element
var iframe = document.getElementById('testIframe');
// Check if loading is complete
if ( iframe.document.readyState == 'complete' ) {
// The loading is complete, call the function we want executed once the iframe is loaded
functionToCallAfterLoading();
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout('checkIframeLoading();', 100);
}
You can use JQuery to modify an iframe after the page is loaded.
Another question on stackoverflow already contains a good example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var locations = ["http://webPage1.com", "http://webPage2.com"];
var len = array.length;
var iframe = $('#frame');
var i = 0;
setInterval(function () {
$iframe.attr('src', locations[++i % len]);
}, 30000);
});
</script>