Question

我必须在页面中加载PDF。

理想情况下，我希望有一个加载动画gif，一旦PDF加载就会被替换。

Answer 1

你试过了吗？

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});

Answer 2

我很确定无法完成。

除了PDF之外的其他任何东西，甚至是Flash。（在Safari，Firefox 3，IE 7上测试）

太糟糕了。

Answer 3

这对我来说（不是pdf，而是另一个“onload抗性”内容）：

<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
    iframe = document.getElementById("frameid");

    WaitForIFrame();

    function WaitForIFrame() {
        if (iframe.readyState != "complete") {
            setTimeout("WaitForIFrame();", 200);
        } else {
            done();
        }
    }

    function done() {
        //some code after iframe has been loaded
    }
</script>

希望这有帮助。

Answer 4

我正在尝试这个并且似乎在为我工作： http://jsfiddle.net/aamir/BXe8C/

更大的pdf文件： http://jsfiddle.net/aamir/BXe8C/1/

Answer 5

$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

你试过.ready吗？

Answer 6

我尝试了开箱即用的方法，我没有对PDF内容进行测试，但它确实适用于普通的基于HTML的内容，下面是如何：

第1步：将您的iframe包装在div包装器中

第2步：在div包装器中添加背景图片：

.wrapperdiv{
  background-image:url(img/loading.gif);
  background-repeat:no-repeat;
  background-position:center center; /*Can place your loader where ever you like */
}

第3步：在您的iframe标记中添加ALLOWTRANSPARENCY="false"

这个想法是在包装器div中显示加载动画，直到iframe在加载iframe后加载它将覆盖加载动画。

试一试。

Answer 7

当iframe准备就绪时，同时使用jquery Load和Ready似乎都不匹配。

我最终做了类似这样的事情

$('#iframe').ready(function () {
    $("#loader").fadeOut(2500, function (sender) {
        $(sender).remove();
    });
});

其中#loader是一个绝对定位的div，位于iframe上方，带有一个微调器gif。

Answer 8

@Alex aw这真是太可惜了。如果您的iframe中有一个类似的html文档，那该怎么办？

<html>
  <head>
    <meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
  </head>
  <body>
  </body>
</html>

绝对是黑客，但它可能适用于Firefox。虽然我想知道在这种情况下加载事件是否会过早发生。

Answer 9

以下是我为任何操作所做的事情，它适用于Firefox，IE，Opera和Safari。

<script type="text/javascript">
  $(document).ready(function(){
    doMethod();
  });
  function actionIframe(iframe)
  {
    ... do what ever ...
  }
  function doMethod()
  {   
    var iFrames = document.getElementsByTagName('iframe');

    // what ever action you want.
    function iAction()
    {
      // Iterate through all iframes in the page.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
        actionIframe(iFrames[i]);
      }
    }

    // Check if browser is Safari or Opera.
    if ($.browser.safari || $.browser.opera)
    {
      // Start timer when loaded.
      $('iframe').load(function()
      {
        setTimeout(iAction, 0);
      }
      );

      // Safari and Opera need something to force a load.
      for (var i = 0, j = iFrames.length; i < j; i++)
      {
         var iSource = iFrames[i].src;
         iFrames[i].src = '';
         iFrames[i].src = iSource;
      }
    }
    else
    {
      // For other good browsers.
      $('iframe').load(function()
      {
        actionIframe(this);
      }
      );
    }
  }
</script>

Answer 10

我必须显示一个加载器，而iFrame中的pdf正在加载，所以我提出了：

    loader({href:'loader.gif', onComplete: function(){
            $('#pd').html('<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>');
    }
    });

我正在展示一台装载机。一旦我确定客户可以看到我的加载器，我就会调用加载iframe的onCompllet加载器方法。 iframe有一个“onLoad”事件。加载PDF后，它会触发onloat事件，我隐藏了加载器：）

重要部分：

iFrame有“onLoad”活动，你可以做你需要的事情（隐藏装载机等）。

Answer 11

如果您可以在下载完成后为用户弹出浏览器的打开/保存界面，那么您可以在开始下载时运行该界面：

$( document ).blur( function () {
    // Your code here...
});

当对话框在页面顶部弹出时，模糊事件将触发。

Answer 12

因为在加载pdf文件之后，iframe文档将有一个新的DOM元素<embed/>，所以我们可以像这样进行检查：

    window.onload = function () {


    //creating an iframe element
    var ifr = document.createElement('iframe');
    document.body.appendChild(ifr);

    // making the iframe fill the viewport
    ifr.width  = '100%';
    ifr.height = window.innerHeight;

    // continuously checking to see if the pdf file has been loaded
     self.interval = setInterval(function () {
        if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === 'complete' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
            clearInterval(self.interval);

            console.log("loaded");
            //You can do print here: ifr.contentWindow.print();
        }
    }, 100); 

    ifr.src = src;
}

Answer 13

我应用于这种情况的解决方案是简单地在DOM中放置一个绝对加载图像，在加载iframe之后将由iframe层覆盖。

iframe的z-index应为（loading's z-index + 1），或者只是更高。

例如：

.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }

希望如果没有javaScript解决方案，这会有所帮助。我确实认为CSS是这些情况的最佳实践。

最好的问候。

Answer 14

function frameLoaded(element) {
    alert('LOADED');
};

 <iframe src="https://google.com" title="W3Schools Free Online Web Tutorials" onload="frameLoaded(this)"></iframe>

当iframe在jQuery中加载完成后，如何触发事件？

14 个答案: