dynamically created iframe triggers onload event twice

jquery iframe load complete event
iframe loading multiple times
load complete iframe
iframe onload not working in firefox
javascript wait for iframe to load
iframe load only once
how to check if iframe content is loaded
iframe events

I created an iframe dynamically and found that this iframe trigger onload event twice.

var i=0;
frameOnload=function(){
  console.log(i++);  
};

var ifr=document.createElement("iframe");  
ifr.src="javascript:(function(){document.open();document.write('test');document.close();})();";
ifr.onload=frameOnload;  
document.body.appendChild(ifr);

Why i finally is 1? How to prevent iframe's onload twice instead of pointing onload function to null inside itself?


I've also encountered the same problem, but get no answer anywhere, so I tested by myself.

The iframe onload event will be triggered twice in webkit browsers ( safari/chrome ), if you attach the onload event BEFORE the iframe is appended to the body.

So you can prevent iframe onload twice by change your codes in the following way.

document.body.appendChild(ifr);
ifr.onload=frameOnload; // attach onload event after the iframe is added to the body

Then, you will only get one onload event, which is the event the document really loaded.

dynamically created iframe triggers onload event twice, I created an iframe dynamically and found that this iframe trigger onload event twice. var i=0; frameOnload=function(){ console.log(i++); }; var ifr=document. However, I see that when the JET application is run, ADF content in the iframe loads fine but the call to ADF page is made twice. This is resulting in the ADF being run twice like the queries and the method calls are done twice which is performance overhead. Moreover, when I navigate back from the JET page as well, the ADF code is triggered again.


To expand on the top-voted answer: if you can not control when and how things are attached to the DOM -- for instance, when using a framework (we've had this happening in our Angular app) -- you might want to try the solution below.

I did heavy cross-browser testing and I found the following workaround: check the parameter passed to onload callback and inspect evt.target.src in the event listener.

iframe.onload = function(evt) {
    if (evt.target.src != '') {
        // do stuff
    }
}

(if you call global method from HTML, remember to pass event in your HTML markup: <iframe onload="window.globalOnLoad(event)">)

evt.target.src can be be '' (empty string) only in webkit in the first onload call, from my tests.

Study of iframe onload behavior in different situations
iframe.onload = function(evt){
    console.log("frameOnload", ++i);
    console.log("src = '" + evt.target.src + "'");
};
iframe onload behavior with regular URL
// Chrome:  onload 1 src='', onload 2 src=requestedSrc
// IE11:    onload 1 src=requestedSrc
// Firefox: onload 1 src=requestedSrc
document.body.appendChild(iframe);
iframe.src = "http://www.example.org/";
iframe onload behavior with 404 URL
// Chrome:  onload 1 src='', onload 2 src=requestedSrc
// IE11:    onload 1 src=requestedSrc
// Firefox: onload 1 src=requestedSrc
document.body.appendChild(iframe);
iframe.src = "http://www.example.org/404";
iframe onload behavior with non-resolvable (at DNS level) URL
// Chrome:  onload 1 src='', onload 2 src=requestedSrc
// IE11:    onload 1 src=requestedSrc
// Firefox: onload NEVER triggered!
document.body.appendChild(iframe);
iframe.src= 'http://aaaaaaaaaaaaaaaaaaaaaa.example/';
iframe onload behavior with iframe.src explicitly set to about:blank before appending to DOM
// Chrome:  onload 1 src='about:blank', onload 2 src=requestedSrc
// IE11:    onload 1 src=requestedSrc
// Firefox: onload 1 src=requestedSrc
iframe.src = "about:blank";
document.body.appendChild(iframe);
iframe.src = "http://www.example.org/";
iframe onload behavior with iframe.src explicitly set to a javascript expression before appending to DOM
// Chrome:  onload 1 src='javascript:void 0', onload 2 src=requestedSrc
// IE11:    onload 1 src=requestedSrc
// Firefox: onload 1 src=requestedSrc
iframe.src = "javascript:void 0";
document.body.appendChild(iframe);
iframe.src = "http://www.example.org/";

dynamically created iframe triggers onload event twice, In my application I use a javascript function to set the src tag of an Iframe: { $("#​DocumentContent").show(); $("#ButtonBox").show(); // Clear dynamic and debug this page, I notice that the 'ViewDoc.aspx' page is called twice. you sould create a general functionusable for content loading. function load(data) { document. Supress the load event in the script thread when the iframe doesn't have a src attribute. In that case, a load event is already fired when binding the iframe to the tree. ./mach build -d does not report any errors ./mach test-tidy does not report any errors These changes fix #15727 (github issue number if applicable).


I've had this happen to asynchronously loaded stylesheets, like this one.

<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">

I find that the simplest solution is to have the event remove itself:

<link rel="preload" href="stylesheet.css" as="style" onload="this.removeAttribute('onload'); this.rel='stylesheet'">

HTML Why is the content of an Iframe loaded twice?, Webkit gets load events. Just not the first 'fake' load that Firefox triggers. I understand the desire for a 'ready/load' type event. I'll have  live works on event bubbling mechanism where as iframe load event is not user action triggered. So you cannot use live to handle the iframe load event. Also before setting the src of the iframe you should attach the iframe load event handler. This is to avoid the case when iframe gets loaded before the load event is attached. Try this


FWIW, while I was able to reproduce double onload in case where iframe.src is javascript:, I was not able to reproduce it with a normal HTTP URL (onload was happening once). However, when you change the order of calls so that iframe.src is set after appending to body, then the double-load happens (again, webkit only):

var i = 0;

var iframe = document.createElement("iframe");
iframe.onload = function(){
  console.log("frameOnload", ++i);
};
document.body.appendChild(iframe);
iframe.src = "http://www.example.org/";
//iframe.src = "http://www.example.org/404";

// double onload!

When I assign src before appending, I get one onload call.

var i = 0;

var iframe = document.createElement("iframe");
iframe.onload = function(){
  console.log("frameOnload", ++i);
};
iframe.src = "http://www.example.org/";
//iframe.src = "http://www.example.org/404";
document.body.appendChild(iframe);

// only one onload

Dynamically created iframe and it's data manipulation issue under , Create 2 $(document).ready(function() { . Sometimes the $(document).ready functions are called twice. Make sure that if an additional load event is triggered (such as an iframe being dynamically injected in DOM ready) the ready event  Searching in different forums there are a lot of information about dynamical iframe and firefox issue. In short words: var iframe = jQuery('<iframe Dynamically created iframe and it's data manipulation issue under Firefox - jQuery Forum


Here code that works good!

Credit: @Dave Stolie https://coderanch.com/t/443223/languages/Frames-loading-refresh

<html>  
 <head>  
   <script type="text/javascript">  
     function loadFrame()  
     {
        var url="http://www.google.com";
        alert(document.getElementById("theFrame").src);

        if (document.getElementById("theFrame").src != url)
        {
            alert("loading");
            document.getElementById("theFrame").src = url;  
        }
     }  
   </script>  
   </head>  
   <body onLoad="loadFrame();">  
   <iframe id="theFrame" src="x"/>
  </body>  
  </html>

#7352 (Appending iframe on "ready" causes re-trigger of "ready , Why is the frame being loaded twice when I hit refresh? Then once it is reloaded, it is then running the onLoad javascript function loading the frame again. However, if the URL needs to be dynamic for some other reason, why Their pages are not JSP pages or anything that is generated by some logic,  The problem with dynamically created elements, is that they aren’t born with the same event handlers as the existing elements. Let’s say we have a list of items that you could click on to toggle/add a class name, when a new element is created and appended to that same list - it won’t work - the event handler attachment is missing.


Frames loading twice on refresh (HTML Pages with CSS and , Find answers to IFRAME loads twice on refresh from the expert page that contains an IFRAME whose src is assigned dynamically by javascript. That means the iframe gets loaded before the onload event gets called, and  Creating an iframe with given HTML dynamically. Iframes has the onload event, however. How to dynamically create an Iframe in jasmine and test it? 1.


IFRAME loads twice on refresh Solutions, Capturing the load event on the iFrame turns out to be really simple. Here are a couple of iFrame/child window Javascript fires a message // the app is ready  function downloadReport() { // create the iframe element with the name, id and src iframeReport.onload = loadedIframe; // this does fire, but not after the page is loaded } function loadedIframe


Capturing the load event of an iFrame, The content sink for the inner-doc calls FlushTags() to trigger frame creation for is to flush in SinkContext::OpenContainer() before we return to the event loop. of when we fire off inner-doc load requests when dynamically inserting iframe  Setting Iframe Height How to set the height of an iframe to show all of its content without need for iframe scrollbars. Dynamically Generating an Iframe How to create and insert an iframe using DOM methods. Changing Iframe Src How to change iframe src to a new URL, with or without JavaScript. Iframe Onload Event How to trigger action once an