url生成pdf输出时iframe onload不起作用答案

【问题标题】：iframe onload not working when url generates pdf ouputurl生成pdf输出时iframe onload不起作用
【发布时间】：2015-12-10 13:01:47
【问题描述】：

我有一个生成 PDF 文件的 URL。为了生成 PDF，我使用 iframe 加载该 url 并在同一页面为用户生成 PDF 文件。

当用户点击按钮时，它会在屏幕上显示loader。并且当 iframe 加载完成时（当 PDF 下载弹出时）它应该被隐藏。我使用了下面的代码，但它不工作，loader 在下载弹出窗口打开后仍然显示（如果我用任何其他类似 google.com 的 URL 更改它就会工作）。

这是我的代码 sn-p。

$("#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>

iframe加载完成后，需要隐藏divajax_loading。我在这里做错什么了吗？还有其他解决办法吗？

提前致谢。

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

您可以使用readystate iframe 属性来检查 iframe 是否已完全加载。但是，如果内容是二进制文件，这在 Chrome 中不起作用。

一旦设置了 iframe url，它就会每秒检查一次 iframe 的 readystate 属性：

$("#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);
     }
}
 }

检查我的问题：Iframe.readyState does not work in chrome

编辑： 在 Firefox 中，您可以使用 onload 事件：

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);
     }
}

【讨论】：

我在 Firefox 中尝试过同样的事情，但对我不起作用。
请检查我编辑的答案。在 Firefox 中，您有 onload 事件。您必须将其附加到 iframe dom 元素上。
有 safari 和 chrome 的解决方案吗？