How to check if iframe is loaded or it has a content?

how to know iframe finished loading
check if iframe has content
check if cross domain iframe is loaded
check if iframe failed to load
how to check iframe is loaded or not in javascript
iframe onload
check if iframe is loaded react
iframe readystate

I have an iframe with id = "myIframe" and here my code to load it's content :

$('#myIframe').attr("src", "my_url");

The problem is sometimes it take too long for loading and sometimes it loaded very quickly. So I must to use "setTimeout" function :

setTimeout(function(){
   if (//something shows iframe is loaded or has content)
   {
       //my code
   }
   else
   {
       $('#myIframe').attr("src",""); //stop loading content
   }
},5000);

All I want to know is how to find out if an iFrame is loaded or it has content. Using iframe.contents().find() will not work. I can't use iframe.load(function(){}).

Try this.

<script>
function checkIframeLoaded() {
    // Get a handle to the iframe element
    var iframe = document.getElementById('i_frame');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (  iframeDoc.readyState  == 'complete' ) {
        //iframe.contentWindow.alert("Hello");
        iframe.contentWindow.onload = function(){
            alert("I am loaded");
        };
        // The loading is complete, call the function we want executed once the iframe is loaded
        afterLoading();
        return;
    } 

    // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    alert("I am here");
}
</script>

<body onload="checkIframeLoaded();"> 

How can I detect whether an iframe is loaded?, i'm dynamically creating an iframe on my page. the source for that iframe is a i need a way to determine when the php page in the iframe is completely done. header('Content-type: application/octet-stream'); header('Content-Disposition:� You can use the iframe’s load event to respond when the iframe loads. document.querySelector('iframe').onload = function(){ console.log('iframe loaded'); }; This won’t tell you whether the correct content loaded: To check that, you can inspect the contentDocument.

kindly use:

$('#myIframe').on('load', function(){
    //your code (will be called once iframe is done loading)
});

Updated my answer as the standards changed.

Determining when an iFrame is fully loaded - JavaScript, An iFrame is a rectangular frame or region in the webpage to load or display another separate webpage or document inside it. So basically, an� Load the script that generates the report into the top-level window instead of the IFRAME and see if it appears as expected. NokX August 30, 2014, 1:33pm #7

I had the same issue and added to this, i needed to check if iframe is loaded irrespective of cross-domain policy. I was developing a chrome extension which injects certain script on a webpage and displays some content from the parent page in an iframe. I tried following approach and this worked perfect for me. P.S.: In my case, i do have control over content in iframe but not on the parent site. (Iframe is hosted on my own server) First: Create an iframe with a data- attribute in it like (this part was in injected script in my case) <iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe> Now in the iframe code, use :

var sourceURL = document.referrer;
window.parent.postMessage('1',sourceURL);

Now back to the injected script as per my case:

setTimeout(function(){
  var myIframe = document.getElementById('myiframe');
  var isLoaded = myIframe.prop('data-isloaded');
  if(isLoaded != '1')
  {
    console.log('iframe failed to load');
  } else {
    console.log('iframe loaded');
  }
},3000);

and,

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons
    {
        console.log('URL issues');
        return;
    }
    else {
        var myMsg = event.data;
        if(myMsg == '1'){
            //8-12-18 changed from 'data-isload' to 'data-isloaded
            $("#myiframe").prop('data-isloaded', '1');
        }
    }           
}

It may not exactly answer the question but it indeed is a possible case of this question which i solved by this method.

How to check a webpage is loaded inside an iframe or into the , How do I detect when the iframe has loaded? Cheers onload-event can be used for iFrames, too … not shure if it's 100% relyable. So basically, an iFrame is used to display a webpage within a webpage. You can see more about iFrames here : HTML iFrames. There may be a variety of reasons for checking whether a webpage is loaded in an iFrame, for example, in cases where we need to dynamically adjust the height or width of an element.

Easiest option:

<script type="text/javascript">
  function frameload(){
   alert("iframe loaded")
  }
</script>

<iframe onload="frameload()" src=...>

Detect iframe loaded - JavaScript, A core challenge we handle at Instamojo is to make our checkout experience as seamless and beautiful as possible across devices and browsers. however accessing hypeDocument is more difficult when trying to do it from an iFrame (HTML widget) as the iFrame won’t know what hypeDocument is referring to (undefined) I tend to use global variables that store anonymous functions to use throughout my document and I store these in a Hype function I call on scene load. e.g:

You can use the iframe's load event to respond when the iframe loads.

document.querySelector('iframe').onload = function(){
    console.log('iframe loaded');
};

This won't tell you whether the correct content loaded: To check that, you can inspect the contentDocument.

document.querySelector('iframe').onload = function(){
    var iframeBody = this.contentDocument.body;
    console.log('iframe loaded, body is: ', body);
};

Checking the contentDocument won't work if the iframe src points to a different domain from where your code is running.

Capturing the load event of an iFrame — A case study, In response to the second reply, a user control won't help my problem as the content that is loaded within the iframe is not necessarily an aspx� Using .load() isn't possible if the iframe has already been loaded (event will never fire) Using .ready() on an iframe element isn't supported and will call the callback immediately even if the iframe isn't loaded yet; Using postMessage or a calling a container function on load inside the iframe is only possible when having control over it

How do I detect that an iframe has started loading and finished , The browser allows us to track the loading of external resources We don't know if it was an error 404 or 500 or something else. That is: if a script loaded successfully, then onload triggers, even if it has programming For <iframe> , the iframe.onload event triggers when the iframe loading finished, both� I have a widget that contains an iframe. The user can configure the url of this iframe, but if the url could not be loaded (it does not exists or the user does not have access to internet) then the iframe should failover to a default offline page. The question is, how can I detect if the iframe could be loaded or not?

Resource loading: onload and onerror, Get code examples like "jquery check if iframe is loaded" instantly right from your Learn how Grepper helps you improve as a Developer! disposition attachment javascript fetch download "excel" � content uri react native fs� The original target for this event is the Document that has loaded. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: DOMContentLoaded event. A different event, load, should be used only

jquery check if iframe is loaded Code Example, How to check if iframe is loaded or it has a content? (6) A really great method is use jQuery AJAX. 22. ready() and $( window ). Using POST. document May 18,� The problem is, the email fires before the iframe is actually fully loaded. How can I use C# to check if the iFrame is loaded before calling the SendEmail() method? That's just the way the web works. Load happens on the client not the server. You'll need to use AJAX to submit an HTTP GET/POST when the Iframe is loaded on the client.

Comments
  • So you don't want the iframe to load anything if it takes it more than 5 seconds to load?
  • Thanks for your help :) . Yes, I don't want to the iframe load anything if it takes more than 5 seconds to load. Using ".ready()" as you show bellow not work.
  • See my answer here stackoverflow.com/questions/17158932/…
  • Check this answer - forums.tumult.com/t/detect-iframe-loaded/7588
  • Demerits for passing a string to setTimeout(). It is cleaner to pass a function reference: setTimeout(checkIframeLoaded, 100);
  • this one lead to "Unsafe JavaScript attempt to access frame with URL url1 from frame with url2 Domains, protocols and ports must match."
  • This was the best solution for what I was trying to accomplish. I am using AngularJS inside the iFrame, and using ng-include, which delays the loading of the included files. I was trying to print the contents of the Iframe upon the onload event, but it was firing too soon. Checking for readyState === "complete" did the trick, since it doesn't change until everything is loaded.
  • I have to say this was the only solution that worked for me as well. You just can't trust the load event on an iframe, as it fires immediately in most cases on IE11, Chrome, and Edge with the iframe.contentDocument.location.href showing as about:blank. This seems to be true even if the src for the iframe is specified directly in the HTML.
  • This won't work if the iframe comes from another domain: VM29320:1 Uncaught DOMException: Blocked a frame with origin "http://localhost:9002" from accessing a cross-origin frame.
  • Calling .load is now deprecated.. Use .on('load', function() {}) instead
  • Calling jQuery is now deprecated ^^
  • This approach doesn't work at all as the event fires immediately because iframes generally start with src="about:blank", even if the src is specified directly in the HTML or before an iframe node is added to the DOM. I tested this by polling for the iframe's contentDocument.location.href in a tight loop on IE11, Chrome, and Edge. It also doesn't work if the content being framed does redirects via meta tags or javascript.