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

33

我很确定它不能完成。

除了PDF以外，还有其他的东西，甚至是Flash。（测试Safari，Firefox 3，IE 7）

太糟糕了。

2008-08-28 17:38:18

198

你试过：

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

来源

2008-08-27 12:55:50 travis

+18

+1因为虽然这似乎不适用于PDF在iframe中的加载，但它对其他内容类型很有用。 – 2011-03-22 20:36:17

+5

+1它可以在IE8，FF6，Chrome 15上工作+1 – Iladarsda 2011-12-12 11:06:17

+3

+1并不完全是原始提问者想知道的（与pdf相关），但是这个答案确实符合这样一个问题：“iframe如何触发事件在jQuery中完成加载？“ 。谢谢 – 2012-01-16 10:45:23

2

@Alex AW这是一个令人失望。如果在你的iframe你有一个看起来像一个HTML文档：

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

绝对是一个黑客，但它可能会为Firefox浏览器。尽管我担心在这种情况下负载事件是否会过早启动。

来源

2008-08-28 05:06:20 travis

+0

多数民众赞成我正在寻找:( – 2011-03-08 14:56:57

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>

来源

2008-11-19 14:00:00 user22367

5

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

中有你。就绪尝试过呢？

来源

2009-06-01 07:51:25 keithics

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>

希望这有助于。

来源

2009-08-28 03:23:37

4

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

最后我做这样的事情

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

哪里#loader是在顶部的绝对定位的div有微调GIF的iframe。

来源

2011-05-26 16:42:43

5

我试过一个开箱即用的方法来这个，我还没有测试这对PDF内容，但它确实为普通的HTML基于内容的工作，继承人如何：

步骤1：在一个div包装你的Iframe包装器

步骤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将覆盖加载动画。

试试看。

来源

2011-12-14 05:34:32

7

我想这一点，似乎是为我工作： http://jsfiddle.net/aamir/BXe8C/

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

来源

2012-07-24 15:27:28

0

我必须证明装载机，而PDF中的iFrame加载所以我拿出：

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的Compllet加载器方法。 Iframe有一个“onLoad”事件。一旦PDF加载它触发在那里我躲在装载机:) onloat事件

的重要组成部分：

的iFrame有“的onLoad”事件，你可以做你需要（隐藏式装载机等）

来源

2013-03-21 03:02:48 rinchik

0

如果你能指望浏览器的打开/保存界面，弹出用户一旦下载完成，那么您可以在开始下载运行此：

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

当对话弹出上的顶部页面，模糊事件将触发。

来源

2015-05-23 07:31:03 Ethan

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

来源

2016-04-07 07:03:07

0

我已经申请到这种情况的解决方案是简单在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是这些情况的最佳实践。

此致敬礼。

来源

2016-06-22 10:46:58 ElaAle

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

回答

相关问题