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

Question

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

User · Answer

A really great method is use jQuery AJAX. The parent frame would look like this:

<iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>

The iframe_load.php file would load the jQuery library and a JavaScript that attempts to load the destination URL in an AJAX GET:

var the_url_to_load = "http://www.your-website.com" ;
$.ajax({
            type: "GET",
            url: the_url_to_load,
            data: "",
            success: function(data){
                // if can load inside iframe, load the URL
                location.href = the_url_to_load ;
            },
            statusCode: {
                500: function() {
                    alert( 'site has errors' ) ;
                }
            },
            error:function (xhr, ajaxOptions, thrownError){
                // if x-frame-options, site is down or web server is down
                alert( 'URL did not load due to x-frame-options' ) ;
            } });

IMPORTANT The destination must have contain the "Access-Control-Allow-Origin" header. Example in PHP:

HEADER( "Access-Control-Allow-Origin: *" ) ;

User · Answer

Try this    lt script gt  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       lt  script gt    lt body onload  checkIframeLoaded     gt

User · Answer

I got a trick working as follows   have not tested cross-browser    Define iframe s onload event handler defined as   x000D   x000D      myIframe   on  load   function     x000D      setTimeout function     x000D          try   x000D              console log     myIframe   0  contentWindow document   x000D            catch  e    x000D              console log e   x000D              if  e message indexOf  Blocked a frame with origin    gt  -1    e message indexOf  from accessing a cross-origin frame     gt  -1    x000D                  alert  Same origin Iframe error found       x000D                    Do fallback handling if you want here x000D                x000D            x000D         1000   x000D   x000D      x000D   x000D   x000D    Disclaimer  It works only for SAME ORIGIN IFRAME documents

User · Answer

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

User · Answer

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    lt iframe id  myiframe  src  http   anyurl com  data-isloaded  0  gt  lt  iframe gt   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

User · Answer

If you re hosting the page and the iframe on the same domain you can listen for the iframe s Window DOMContentLoaded event  You have to wait for the original page to fire DOMContentLoaded first  then attach a DOMContentLoaded event listener on the iframe s Window   Given you have an iframe as follows    lt iframe id  iframe-id  name  iframe-name  src       gt  lt  iframe gt    the next snippet will allow you to hook into the iframe s DOMContentLoaded event   document addEventListener  DOMContentLoaded   function          var iframeWindow   frames  iframe-name           var iframeWindow   document querySelector   iframe-id   contentWindow        var iframeWindow   document getElementById  iframe-id   contentWindow      iframeWindow addEventListener  DOMContentLoaded   function              console log  iframe DOM is loaded

User · Answer

I m not sure if you can detect whether it s loaded or not  but you can fire an event once it s done loading     function            myIframe   ready function              your code  will be called once iframe is done loading                EDIT  As pointed out by Jesse Hallett  this will always fire when the iframe has loaded  even if it already has  So essentially  if the iframe has already loaded  the callback will execute immediately

User · Answer

When an iFrame loads  it initially contains the  document  so checking the load state might best work by checking what s there now    if     iframe   contents   find  body   children   length  gt  0           is loaded   else          is not loaded

User · Answer

kindly use       myIframe   on  load   function          your code  will be called once iframe is done loading        Updated my answer as the standards changed

User · Answer

If you need to know when the iframe is ready to manipulate  use an interval  In this case I  ping  the content every 250 ms and if there s any content inside target iframe  stop the  ping  and do something   var checkIframeLoadedInterval   setInterval  checkIframeLoaded  250     function checkIframeLoaded         var iframe content      iframe   contents         if  iframe content length  gt  0            clearInterval checkIframeLoadedInterval              Apply styles to the button         setTimeout function                    Do something inside the iframe              iframe content find  body  whatever   css  background-color    red               100     100 ms of grace time

User · Answer

Easiest option    lt script type  text javascript  gt    function frameload       alert  iframe loaded        lt  script gt    lt iframe onload  frameload    src     gt

User · Answer

in my case it was a cross-origin frame and wasn t loading sometimes   the solution that worked for me is  if it s loaded successfully then if you try this code   var iframe   document getElementsByTagName  iframe   0   console log iframe contentDocument     it won t allow you to access contentDocument and throw a cross-origin error however if frame is not loaded successfully then contentDocument will return a  document object

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

Examples related to javascript

Examples related to jquery

Examples related to iframe