91

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!

Dagang
  • 24,586
  • 26
  • 88
  • 133

6 Answers6

135
<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/

simonbs
  • 7,932
  • 13
  • 69
  • 115
28

Try this:

top.document.getElementById('AppFrame').setAttribute("src",fullPath);
Pang
  • 9,564
  • 146
  • 81
  • 122
Deepika
  • 444
  • 3
  • 11
15

Try this...

function urlChange(url) {
    var site = url+'?toolbar=0&amp;navpanes=0&amp;scrollbar=0';
    document.getElementById('iFrameName').src = site;
}

<a href="javascript:void(0);" onClick="urlChange('www.mypdf.com/test.pdf')">TEST </a>
Sunny
  • 151
  • 1
  • 2
4

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

Suor
  • 2,845
  • 1
  • 22
  • 28
  • 1
    Also, if you are using jQuery you can bind load event handler for iframe `$('iframe').load(function (){ ...do smth... })` – Suor May 14 '11 at 10:40
3

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> ');
Chamod Wijesena
  • 148
  • 3
  • 15
2

Try this:

document.frames["myiframe"].onload = function(){
   alert("Hello World");
}
Headshota
  • 21,021
  • 11
  • 61
  • 82
  • 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. – Ray Hulha Jan 27 '13 at 16:46