iframe onload not working when url generates pdf ouput

Question

I have one URL which generates PDF file. For generating PDF, i am using iframe to load that url and generate PDF file in same page for users.

When user click on button, it will show loader in screen. and it should be hide when iframe load complete(when PDF download popup). I used below code, but its not working, loader remain show after download popup open (if i change url with any other like google.com then it will work).

Here is my code snippet.

$("#test").click(function(){
  iframe = document.getElementById("download-container1");
  if (iframe === null)
  {
    $("#ajax_loading").show();
    var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile";
    iframe = document.createElement('iframe');  
    iframe.id = "download-container1";
    document.body.appendChild(iframe);

    $('#download-container1').load(function () {
      $("#ajax_loading").hide();
    });
    iframe.src=url;
  }
  
});

.ajax_loading {
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="ajax_loading" id="ajax_loading"><span>Please Wait... Loading</span></div>
    <button id="test">click</button>
  </body>
</html>

When iframe complete load, need to hide div ajax_loading. Am i doing anything wrong here? is there any other solution?

Thanks in advance.

score 0 · Answer 1 · edited May 23 '17 at 11:53

You could use the readystate iframe property to check if iframe is fully loaded. However this does not work in Chrome if contents is a binary file.

Once the iframe url is set it checks the iframe readystate property every second:

$("#test").click(function(){
 iframe = document.getElementById("download-container1");
 if (iframe === null)
 {
  $("#ajax_loading").show();
  var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile";
  iframe = document.createElement('iframe');  
  iframe.id = "download-container1";
  document.body.appendChild(iframe);

  //$('#download-container1').load(function () {
  //     $("#ajax_loading").hide();
  //});
  iframe.src=url;
  checkFinishedDownload(iframe);
}

 });

function checkFinishedDownload(ifr) {
     if (ifr.readyState == "complete" || ifr.readyState == "interactive") {
         // Here hide the spinner
         $("#ajax_loading").hide();
    }
     else {
        setTimeout(function () {
            checkFinishedDownload(ifr);
        }, 1000);
     }
}
 }

Check my question: Iframe.readyState does not work in chrome

EDIT: In firefox you can use the onload event:

function checkFinishedDownload(ifr) {
     if ($.browser.mozilla) {
         ifr.onload = function () {
            $("#ajax_loading").hide();
          }

     }else{
          iframeCheck(ifr);
     }
}

function iframeCheck(iframe){
       if (iframe.readyState == "complete" || iframe.readyState == "interactive") {
         // Here hide the spinner
         $("#ajax_loading").hide();
    }
     else {
        setTimeout(function () {
            checkFinishedDownload(iframe);
        }, 1000);
     }
}

please, check my edited answer. In firefox you have the `onload` event. You have to attach it over the iframe dom element. — anmarti, Sep 17 '15 at 07:19

iframe onload not working when url generates pdf ouput

1 Answers1