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!
            Asked
            
        
        
            Active
            
        
            Viewed 3.4e+01k times
        
    6 Answers
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
- 
                    8The link in this answer is broken now. It might be useful to re-upload this on http://www.jsfiddle.net, and then post a link to that. – Anderson Green Feb 18 '13 at 18:04
- 
                    2Good idea. I just changed it. – simonbs Jul 08 '13 at 10:29
28
            
            
        Try this:
top.document.getElementById('AppFrame').setAttribute("src",fullPath);
- 
                    Works nicely! Working example wrapped in a link: Photos on the fly This method would require a CSS pointer, like – Eric P Oct 19 '22 at 22:56
15
            
            
        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>
 
    
    
        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
- 
                    1Also, 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
 
     
    