如何在iframe在jQuery中完成加载时触发事件？
我必须在页面中加载PDF。
理想情况下，我想有一个加载animation的gif一旦PDF加载replace。
我相当肯定，这是不能做到的。
除了PDF以外，还有其他的东西，甚至是Flash。 （testingSafari，Firefox 3，IE 7）
太糟糕了。
你有没有尝试过：
$("#iFrameId").on("load", function () { // do something once the iframe is loaded }); 这对我来说（不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>
希望这可以帮助。
我正在尝试这个，似乎是为我工作： http : //jsfiddle.net/aamir/BXe8C/
更大的pdf文件： http : //jsfiddle.net/aamir/BXe8C/1/
$("#iFrameId").ready(function (){ // do something once the iframe is loaded });
你有没有尝试。
我尝试了一个开箱即用的方法，我没有testing过这个PDF内容，但它确实适用于普通的基于HTML的内容，inheritance人如何：
第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中显示加载animation，直到iframe加载iframe之后才加载animation。
试一试。
当iframe准备就绪时，使用jquery Load和Ready似乎都不匹配。
我最终做了这样的事情
$('#iframe').ready(function () { $("#loader").fadeOut(2500, function (sender) { $(sender).remove(); }); });
#loader是一个绝对定位的div顶部与微调gif iframe。
@亚历山大这是一个无赖。 如果在你的iframe你有一个html文档，看起来像这样：
<html> <head> <meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" /> </head> <body> </body> </html>
绝对是一个黑客，但它可能适用于Firefox。 虽然我不知道在这种情况下负载事件是否会过早发生。
以下是我为任何操作所做的工作，并且可以在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>
我不得不展示一个加载器，而在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的Compllet加载器方法。 Iframe有一个“onLoad”事件。 一旦PDF加载它触发onloat事件，我隐藏加载器:)
重要部分：
iFrame有“onLoad”事件，你可以做你所需要的（隐藏装载机等）
如果您可以预期浏览器的打开/保存界面在下载完成后popup给用户，那么您可以在开始下载时运行这个界面：
$( document ).blur( function () { // Your code here... });
当页面顶部popup对话框时，将会触发模糊事件。
由于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; }
我已经应用到这种情况的解决scheme是简单地在DOM中放置一个绝对加载的图像，iframe加载后将被iframe层覆盖。
iframe的z-index应该是（加载的z-index + 1），或者更高。
例如：
.loading-image { position: absolute; z-index: 0; } .iframe-element { position: relative; z-index: 1; }
希望这有助于如果没有javaScript解决scheme。 我认为CSS是这些情况的最佳实践。
最好的祝福。
