I have a program which will dynamically set an iframe src to load pages. I need to hook a event handler for the page completely loaded. How can i do it? Thanks!
Add a comment |
6 Answers
<script type="text/javascript"> function iframeDidLoad() { alert('Done'); } function newSite() { var sites = ['http://getprismatic.com', 'http://gizmodo.com/', 'http://lifehacker.com/'] document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)]; } </script> <input type="button" value="Change site" onClick="newSite()" /> <iframe id="myIframe" src="http://getprismatic.com/" onLoad="iframeDidLoad();"></iframe> Example at http://jsfiddle.net/MALuP/
2 Comments
Anderson Green
The link in this answer is broken now. It might be useful to re-upload this on jsfiddle.net, and then post a link to that.
simonbs
Good idea. I just changed it.
Try this:
top.document.getElementById('AppFrame').setAttribute("src",fullPath); 
1 Comment
Eric P
Works nicely! Working example wrapped in a link: <a onClick="top.document.getElementById('iframe_id').setAttribute('src','photosonthefly.com');" >Photos on the fly</a> This method would require a CSS pointer, like <style>a:hover {cursor: pointer;}</style>
Try this...
function urlChange(url) { var site = url+'?toolbar=0&navpanes=0&scrollbar=0'; document.getElementById('iFrameName').src = site; } <a href="javascript:void(0);" onClick="urlChange('www.mypdf.com/test.pdf')">TEST </a> 
Comments
You should also consider that in some Opera versions onload is fired several times and add some hooks:
// fixing Opera 9.26, 10.00 if (doc.readyState && doc.readyState != 'complete') { // Opera fires load event multiple times // Even when the DOM is not ready yet // this fix should not affect other browsers return; } // fixing Opera 9.64 if (doc.body && doc.body.innerHTML == "false") { // In Opera 9.64 event was fired second time // when body.innerHTML changed from false // to server response approx. after 1 sec return; } Code borrowed from Ajax Upload
1 Comment
Suor
Also, if you are using jQuery you can bind load event handler for iframe
$('iframe').load(function (){ ...do smth... })try this code. then 'formId' div can set the image.
$('#formId').append('<iframe style="width: 100%;height: 500px" src="/document_path/name.jpg"' + 'title="description"> </iframe> '); 
Comments
Try this:
document.frames["myiframe"].onload = function(){ alert("Hello World"); } 
1 Comment
Ray Hulha
document.frames is not valid JavaScript. parent.frames might be an option though... but it does seem that the best way to access iframes in JavaScript is indeed with getElementById.