Dynamically create an iframe and attach onload event to it

Question

I have created a iframe dynamically and added a src attribute to it. Then I have appended this iframe to body of the page. Know I want to attach an onload event to iframe to read the iframe content. Can somebody suggest how do I do that?

frame = document.createElement('iframe'); frame.setAttribute('src','http://example.com'); body.appendChild(frame); frame.onload = function(){ alert('hi'); // here I want to read the content in the frame. }

Community · Accepted Answer · 2013-04-05 14:46:33Z

Some browsers do have the onload event for an iframe, first you should try to attach it before setting the iframe's src attribute.

I'd avoid using it altogether since in certain browsers it might not fire under certain conditions (e.g. the target was in cache in IE).

You could user a timer to check if the frame's contentWindow's readystate is complete

var inter = window.setInterval(function() { if (frame.contentWindow.document.readyState === "complete") { window.clearInterval(inter); // grab the content of the iframe here } }, 100);

It doesn't work for me because the iframe is in another origin, i receive SecurityError: Blocked a frame with origin "localhost" from accessing a cross-origin frame.
You are correct, it will indeed only work with same origin frames. It might be safer to assume window.onload functionality is better today, depending on which browsers you are planning to support.

Tyler Rick · Accepted Answer · 2020-05-13 05:15:53Z

You can add a load event listener to the iframe's contentWindow, which is just like any other Window.

Here's an example:

 iframe = document.createElement('iframe') iframe.setAttribute('src', 'https://example.com/') document.getElementsByTagName('body')[0].appendChild(iframe) const onLoaded = function() { console.log('iframe loaded'); } if (iframe.contentWindow.document.readyState === 'complete') { console.log('already loaded') onLoaded() } else { iframe.contentWindow.addEventListener('load', onLoaded) }

Mauvis Ledford · Accepted Answer · 2012-10-29 21:03:10Z

I just tried this and it worked in Chrome:

var iframe = document.createElement('iframe'); // append iframe to DOM however you like then: iframe.contentWindow.parent.location.href // properly gives parent window's href.

W3school says contentWindow is supported in all major browsers.

GitaarLAB · Accepted Answer · 2015-02-20 20:25:25Z

-2

I doubt you can attach an onload event to an iframe. It will not work on all browsers. You can on the other hand check if the iframe was loaded by:

window.onload=function() { var iframe=document.getElementById('myframe'); if(iframe) alert('The iframe has just been loaded.'); }

Or use AJAX to load the content in your container. With AJAX you can set a proper load-complete event.

edited Feb 20, 2015 at 20:25

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

answered May 31, 2011 at 6:37

Anze Jarni

1,1677 silver badges7 bronze badges

3 Comments

Anze Jarni Over a year ago

try onload="return function_name();"

Anze Jarni Over a year ago

and if you want to take matters in your own hands and complicate a little, you can make a periodical timer which remembers the document.body.innerHTML of an iframe and fires your own event everytime when it changes. If you only need it once, you can destroy the timer after it has fired an event.

Raju Ram Over a year ago

add iframe.onload listener to check loading

Collectives™ on Stack Overflow

Dynamically create an iframe and attach onload event to it

4 Answers 4

2 Comments

Comments

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

3 Comments

Linked

Related