当iframe完成在jQuery中的加载后,如何触发事件?


Answers:


38

我可以肯定它无法完成。

除PDF以外,几乎没有其他功能,甚至Flash也可以。(在Safari,Firefox 3,IE 7上测试)

太糟糕了。


FWIW,所有的人(甚至PDF)为我工作的Chrome在OS X
pkaeding

是的,它可以在Chrome中使用,但不能在IE中使用。如果应用程序在Web上,则它也必须在IE中工作。
罗伯·史密斯

214

你有没有尝试过:

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

19
+1,因为这似乎不适用于iframe中PDF的加载,但对其他内容类型很有用。
Cory House

3
+1并不完全是原始申请者想要知道的(与pdf相关),但是此答案与以下问题相匹配:“当iframe完成在jQuery中的加载后,如何触发事件?” 。谢谢
Harvey Darvey 2012年

尚未尝试使用PDF,但是它可以完美地用于普通URL。
Bob-ob 2012年

我在内部使用它,$(function({})以便首先加载框架。但是没有得到希望的结果。Chrome 25 Mac
William Entriken 2013年

这不适用于在iframe中加载pdf。经测试,在IE 11
罗伯特·史密斯

7

这对我有用(不是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>  

希望这可以帮助。


7
应该避免使用setTimeout()字符串参数:setTimeout(WaitForIFrame, 200);
Stefan Majewsky

7

我正在尝试这样做,似乎正在为我工​​作:http : //jsfiddle.net/aamir/BXe8C/

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


1
与@travis的回答没有太大不同,但是由于attr src change和css的用法很优美,我将+1。我可以看到有人至少在伪造一个不错的装载机那样做。
安东尼·哈佐普洛斯

在PDF完全加载之前触发了加载事件。
etlds 2012年

说,您曾在OSX和最新的Chrome上以及在首次加载页面上尝试过您的链接后,该链接无法正常工作,Loading PDF...但一直保留,但是在我刷新页面时说PDF Loaded!。但这似乎适用于url :),所以对我来说非常有用。谢谢!
GabLeRoux

如果文件设置为下载,而不是在iframe中呈现,则此方法不起作用。
2014年

这在IE 11中不起作用。保持“正在加载PDF ...”。我正在寻找一个解决方案,同时在IE 11
马克·

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

您是否尝试过.ready?


此方法将无法正常工作。从JQuery文档中:“ .ready()方法只能在与当前文档匹配的jQuery对象上调用,因此可以省略选择器。” 听起来无论选择器使用什么,它都会在$(document)之后触发。
Cazuma Nii Cavalcanti

我相当确定这是无聊的理论。
巴尼

重复先前的答案!
SyntaxRules

正如其他人所说,我对此进行了测试,但没有效果。准备就绪是在文档就绪而不是iframe上调用的。使用“加载时”选项。
格雷格

5

我尝试了一种开箱即用的方法,我没有针对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将覆盖加载动画为止。

试试看。


4

当iframe完全准备就绪时,同时使用jquery的Load和Ready似乎都不真正匹配。

我最终做了这样的事情

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

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


2

@Alex aw真是可惜。如果您iframe的HTML文档如下所示,该怎么办:

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

绝对可以,但是它可能适用于Firefox。尽管我想知道在这种情况下load事件是否会过早触发。


那就是我正在寻找的东西:(
Aamir Afridi

1

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


0

这是我所做的任何操作,它可以在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>

0

如果您希望下载完成后为用户弹出浏览器的打开/保存界面,则可以在开始下载时运行该界面:

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

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


0

由于加载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;
}

0

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

iframe的Z索引应为(加载的Z索引+ 1)或更高。

例如:

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

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

最好的祝福。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.