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

【问题标题】：How do I fire an event when a iframe has finished loading in jQuery?当 iframe 在 jQuery 中完成加载时，如何触发事件？
【发布时间】：2010-09-06 23:57:13
【问题描述】：

我必须在页面中加载 PDF。

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你试过了吗：

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

【讨论】：

+1 因为虽然这似乎不适用于在 iframe 中加载 PDF，但它对其他内容类型很有用。
+1 不完全是原始提问者想知道的（与 pdf 相关），但这个答案与“当 iframe 完成 jQuery 加载后如何触发事件？”的问题相匹配。 .谢谢
没有在 PDF 上尝试过这个，但它可以完美地运行在普通 URL 上。
我在$(function({}) 中使用它，以便首先加载框架。但我没有得到希望的结果。 Chrome 25 Mac
这不适用于在 iframe 中加载 pdf。在 IE 11 中测试。

【解决方案2】：

我很确定这是不可能的。

除了 PDF 之外，几乎所有其他东西都可以使用，甚至是 Flash。（在 Safari、Firefox 3、IE 7 上测试）

太糟糕了。

【讨论】：

FWIW，所有这些（甚至是 PDF）都为我在 OS X 上的 Chrome 上工作。
是的，它适用于 Chrome，但不适用于 IE。如果应用程序在网络上，它也必须在 IE 中工作。

【解决方案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>

希望这会有所帮助。

【讨论】：

setTimeout() 字符串参数应该避免：setTimeout(WaitForIFrame, 200);

【解决方案4】：

我正在尝试这个，似乎对我有用： http://jsfiddle.net/aamir/BXe8C/

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

【讨论】：

与@travis 的答案没有太大不同，但由于 attr src 更改和 css 的优雅使用，我会 +1。我可以看到至少有人假装一个不错的装载机这样做。
在 PDF 完全加载之前触发的 load 事件。
在 OSX 上用最新的 Chrome 和第一页加载尝试了你的链接，它不起作用，保持Loading PDF... 但是当我刷新页面时，说PDF Loaded!。但这似乎适用于 url :) 所以它对我非常有用。谢谢！
如果文件设置为下载，而不是在 iframe 中呈现，这将不起作用。
这在 IE 11 中不起作用。保持“正在加载 PDF...”。我正在寻找同样适用于 IE 11 的解决方案。

【解决方案5】：

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

您尝试过 .ready 吗？

【讨论】：

此方法无法按预期工作。来自 JQuery 文档：“.ready() 方法只能在与当前文档匹配的 jQuery 对象上调用，因此可以省略选择器。”听起来无论使用什么选择器，它都会在 $(document) 之后触发。
我很确定这是空谈。
重复之前的答案！
正如其他人所说，我对此进行了测试，但没有成功。 Ready 是在文档就绪时调用的，而不是 iframe...使用 On Load 选项。

【解决方案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 将覆盖加载动画。

试一试。

【讨论】：

【解决方案7】：

当 iframe 真正准备好时，使用 jquery Load 和 Ready 似乎都没有真正匹配。

我最终做了这样的事情

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

#loader 是一个绝对定位在 iframe 顶部的 div，带有一个微调器 gif。

【讨论】：

【解决方案8】：

@Alex aw 这真是太糟糕了。如果在您的iframe 中有一个看起来像这样的 html 文档会怎样：

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

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

【讨论】：

这就是我要找的:(

【解决方案9】：

当 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”事件，您可以在其中执行所需的操作（隐藏加载程序等）

【讨论】：

【解决方案10】：

这是我为任何操作所做的，它适用于 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>

【讨论】：

【解决方案11】：

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案13】：

我针对这种情况应用的解决方案是简单的在DOM中放置一个绝对加载图片，在iframe加载完成后会被iframe层覆盖。

iframe 的 z-index 应该是（加载的 z-index + 1），或者更高。

例如：

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

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

最好的问候。

【讨论】：

【解决方案14】：

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

 &lt;iframe src="https://google.com" title="W3Schools Free Online Web Tutorials" onload="frameLoaded(this)"&gt;&lt;/iframe&gt;

【讨论】：