2

I use iframes on most my projects. They embed things ranging from ads to sponsors to announcements. Allot of people have contacted me asking why the pages take so long to load, and I simply reply "technical issues". The actual pages content loads, it just stays loading. I also use some iframes with 0 width and height with no frameborder.

I am trying to make the page say its loaded, but load the iframe in the background. I have searched everywhere and not found an answer. The closest I have found is how to make the iframe the lowest priority in loading time.

I have tried this:

(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;

// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";

doc.open().write('<body onload="' + 
'var d = document;d.getElementsByTagName(\'head\')[0].' + 
'appendChild(d.createElement(\'script\')).src' + 
'=\'\/path\/to\/file\'">');

doc.close(); //iframe onload event happens

})(document);

I have tried this:

$(window).bind("load", function() {
  $('#backup').prepend('<iframe src="https://web.archive.org/save/https://ppyazi.com/" width="0" height="0"></iframe>');
});
$(window).bind("load", function() {
  $('#uggaustraliancollection').prepend('<iframe src="https://web.archive.org/web/20180314120100/https://www.instagram.com/uggaustraliancollection/" width="100%" height="400"></iframe>');
});
$(window).bind("load", function() {
  $('#zuper').prepend('<iframe src="https://ppyazi.com/zuper/wall.php?username=quix" width="0" height="0"></iframe>');
});
<a href="https://www.instagram.com/uggaustraliancollection/" class="list-group-item list-group-item-action">
<?php $total = file_get_contents('stats.php') + 0.0001;
?>
<div id="uggaustraliancollection"></div>
<script type="text/javascript" src="//ylx-1.com/bnr.php?section=General&pub=315858&format=300x50&ga=g&mbtodb=1"></script> <noscript><a href="https://yllix.com/publishers/315858" target="_blank"><img alt=" " src="//ylx-aff.advertica-cdn.com/pub_2hpya3.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></a></noscript>
<span class="badge badge-dark">Advertisment</span>
</a>
user9151888
  • 145
  • 1
  • 9
  • 2
    Wild suggestion. Set iframe to blank in the source code. Then have a javascript function that fires onload() that changes the url. That would let the page load before it changes the url of the iframe – pastaleg Mar 11 '18 at 04:59
  • That might actually work. Could you maybe send the code to do that as an answer? – user9151888 Mar 11 '18 at 05:03
  • 1
    Upon further research, someone has already asked this so here is that question. https://stackoverflow.com/questions/10380787/load-iframe-after-page-load – pastaleg Mar 11 '18 at 05:07
  • none of the answers work – user9151888 Mar 11 '18 at 05:12

2 Answers2

2

Since you indicated that none of the linked answers worked, here is a snippet that I have tested and works for me. Putting up a target div, I use a jQuery script to append a whole iframe to its contents on page load.

In HTML

<div id="cool_thing"></div>

In jQuery script:

$(window).bind("load", function() {
  $('#cool_thing').prepend('<iframe src="https://www.weather.gov/" width="680" height="380"></iframe>');
});

This is working starting point. I can imagine combining this with a static image that is replaced/removed when the function is running, and it will be hard to tell the difference.

pastaleg
  • 1,782
  • 2
  • 17
  • 23
  • 1
    Did this help? If it did, please accept this as an answer to you question. Otherwise let us know what is wrong. – pastaleg Mar 11 '18 at 18:31
  • Works like a charm. Is there a way I could make it interchangable? for example, can I embed google.com and stackoverflow.com. using the same code as a variable? – user9151888 Mar 14 '18 at 12:11
  • I tested with it a bit more, and it seems like it doesnt work anymore. Please check my question for more detail. – user9151888 Mar 14 '18 at 12:40
1

I think this is what you want.

For multiple iframes:-

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe1"></iframe>
<iframe id="iframe2"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe1");
iframe.src = "pagename1.html";
var iframe = document.getElementById("iframe2");
iframe.src = "pagename2.html";
}
</script>
</body>
</html>

Single iframe:-

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe");
iframe.src = "pagename.html";
}
</script>
</body>
</html>