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><img alt=" " src="//ylx-aff.advertica-cdn.com/pub_2hpya3.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></noscript>
<span class="badge badge-dark">Advertisment</span>
</a>
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.
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>
Related
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
I'm using this script to set the height of my iframe based on content height size, but i need to click twice on the menu, to show the entire content.
Look here: http://www.luilui.com.br/inverno2013
Anyone knows why?
my page that contains the iframe script:
<iframe name="iframe_site" id="iframe_site" src="inicio.asp" width="100%" scrolling="no" height="100%" marginheight="0" frameborder="0" ></iframe>
this is on the pages inside iframe:
<body id="size">
.
.
.
.
content
.
.
.
.
<script language="Javascript" type="text/javascript">
var _iframe = parent.document.getElementById("iframe_site"),
_height = _iframe.contentDocument.getElementById("size").scrollHeight || _iframe.contentWindow.document.getElementById("size").scrollHeight;
_iframe.height = _height + 40;
</script>
</body>
EDITED: I do not know if this helps, but only the page inicio.asp appears complete, that is the page I call in the iframe tag
Using window.setTimeout i have fixed that problem....
<script language="Javascript" type="text/javascript">
window.setTimeout(
function(){
var _iframe = parent.document.getElementById("iframe_site"),
_height = _iframe.contentDocument.getElementById("size").scrollHeight || _iframe.contentWindow.document.getElementById("size").scrollHeight;
_iframe.height = _height;
},
2000);
</script>
EDIT I Found the solution! credit goes entirely to the assistance I received from Mixel. For those who find themselves in the same predicament of needing to pull a div from an iframe without using onload here is the entire working code that I am using:
<html>
<head>
<title>Main page</title>
<style type="text/css">#hiddenframe {display:none;}</style>
<script type="text/javascript">
window.onload = function () {
var myUrl = "test.html"
document.frames['hiddenframe'].location.href = myUrl;
}
</script>
</head>
<body>
<div id="parent-div"></div>
<iframe id="hiddenframe"></iframe>
</body>
</html>
And the Child Page:
<html>
<head>
<title>Child Page</title>
<script type="text/javascript">
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
</script>
</head>
<body>
<div id="daughter-div">
This is the Child Div!
</div>
</body>
</html>
Thank you once again to Mixel for his help and patience in finding a solution
That's because you reload hiddenframe in onload handler. Reloading triggers onload event, then onload handler reloads hiddenframe. And this happens again and again...
Edit:
May be I do not understand what you want to do in your code, but if you want to load iframe when parent window is loaded you need this:
window.onload = function () {
document.getElementById('hiddenframe').setAttribute('src', 'test.html');
}
And there is window.onload handler of test.html page:
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
Edit2:
That's html of main page:
<div id="parent-div"></div>
<iframe id="hiddenframe">
</iframe>
And that's test.html:
<div id="daughter-div">
Child div!
</div>
I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.visibility = "hidden";
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
Then use
onclick="printPage('print_url');"
I think you're looking for window.print()
Update
Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.
Here are some forum posts and web pages that talk about the same thing:
http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
http://www.webmasterworld.com/javascript/3524974.htm
http://www.felgall.com/jstip29.htm
Update 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.
index.html
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
print.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
Example:
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>
I have an Iframe.html file :
<body onload="alert('frame 1 loaded');">
<div> This is frame 1 content </div>
<a id="a1" href="Sample.html"> click</a>
</body>
Sample.html
<body>
<ul id="list1">
<li name="one">one</li>
<li name="two">two</li>
</ul>
And I calling the iframe form test.html file :
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i=10;
$("#frame1").ready(function () {
$('#frame1').contents().find('#a1').click(function() {
alert("Hello");
$('#frame1').attr('src', $('#frame1').contents().find('#a1').attr("href"));
$('#frame1').load();
});
$('#frame1').contents().find('#a1').click();
</script>
</head>
<body onload="handleMainOnload();">
<!--iframe id="frame1" src="about:blank"/-->
<iframe id="frame1" src="iframe.html"/>
</body>
Now I tried using the content of URL loaded in iframe i.e. Sample.html in test.html as follows :
$('#frame1').contents().find('#list1 li[name=one]').click(function() {
alert(" Clicking list....");
});
$('#frame1').contents().find('#list1 li[name=one]').click();
But this doesn't work.. Can you please tell me From Test.html how to access Sample.html file content like(id,name,class etc.) which is loaded in iframe.html using JQuery.
Please help.
Thanks
Kamakshi
To access any document inside an iframe included inside an HTML take for example the following page:
<html>
....
<body>
<iframe id='myFrame' name='myFrame' src='someUrl'>
</body>
</html>
You can access using the following script
myFrame.document.getElementById('elementID');
Make sure you provide a name (here: myFrame) that is used to access the frame itself.
The elementID is the id of any element inside the html/url loaded inside the iframe
<html>
<head>
<title>Main Frame 2 Title </title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
------
------
alert("frame ready");
var $value1 = $frame.contents().find('#list1 li[name=one]').html() ;
alert("loaded + " + $value1);
$frame.contents().find('#list1 li[name=one]').click(function() {
alert("About + clicked");
});
$frame.contents().find('#list1 li[name=one]').click();
}); });
</script>
</head>
<body>
<iframe id="frame1" src="sample.html" />
This works fine, if i am giving iframe src=sample.html directly instead of redirecting using another file (i.e. src=iframe.html) and keeping Sample.html in same domain as parent file (test.html).