当 iframe 在 jQuery 中完成加载时，如何触发事件？
[英]How do I fire an event when a iframe has finished loading in jQuery?
问题描述
I have to load a PDF within a page.
我必须在页面内加载 PDF。
Ideally I would like to have a loading animated gif which is replaced once the PDF has loaded.理想情况下，我想要一个加载动画 gif，一旦 PDF 加载，它就会被替换。
14 个解决方案
解决方案1
215 2008-08-27 12:55:50
Have you tried:你有没有尝试过：
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});
解决方案2
38 已采纳 2008-08-28 17:38:18
I'm pretty certain that it cannot be done.我很确定这是做不到的。
Pretty much anything else than PDF works, even Flash.除了 PDF 之外，几乎任何东西都可以工作，甚至是 Flash。 (Tested on Safari, Firefox 3, IE 7) （在 Safari、Firefox 3、IE 7 上测试）
Too bad.太糟糕了。
解决方案3
7 2012-07-24 15:27:28
I am trying this and seems to be working for me: http://jsfiddle.net/aamir/BXe8C/我正在尝试这个并且似乎对我有用： http : //jsfiddle.net/aamir/BXe8C/
Bigger pdf file: http://jsfiddle.net/aamir/BXe8C/1/更大的 pdf 文件： http : //jsfiddle.net/aamir/BXe8C/1/
解决方案4
7
This did it for me (not pdf, but another " onload resistant" content):这是为我做的（不是 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>
Hope this helps.希望这可以帮助。
解决方案5
6 2009-06-01 07:51:25
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});
have you tried .ready instead?你试过 .ready 吗？
解决方案6
5 2011-12-14 05:34:32
I tried an out of the box approach to this, I havent tested this for PDF content but it did work for normal HTML based content, heres how:我为此尝试了一种开箱即用的方法，我还没有针对 PDF 内容对此进行过测试，但它确实适用于基于 HTML 的普通内容，方法如下：
Step 1 : Wrap your Iframe in a div wrapper第 1 步：将您的 Iframe 包装在 div 包装器中
Step 2 : Add a background image to your div wrapper:第 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 */
}
Step 3 : in ur iframe tag add ALLOWTRANSPARENCY="false"第 3 步：在您的 iframe 标签中添加ALLOWTRANSPARENCY="false"
The idea is to show the loading animation in the wrapper div till the iframe loads after it has loaded the iframe would cover the loading animation.这个想法是在包装器 div 中显示加载动画，直到 iframe 在加载后加载 iframe 将覆盖加载动画。
Give it a try.试试看。
解决方案7
4 2011-05-26 16:42:43
Using both jquery Load and Ready neither seemed to really match when the iframe was TRULY ready.当 iframe 真正准备好时，同时使用 jquery Load 和 Ready 似乎都不匹配。
I ended up doing something like this我最终做了这样的事情
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});
Where #loader is an absolutely positioned div over top the iframe with a spinner gif.其中#loader 是一个绝对定位在 iframe 顶部的 div，带有一个微调 gif。
解决方案8
2 2008-08-28 05:06:20
@Alex aw that's a bummer. @Alex 啊，真是太糟糕了。 What if in your iframe you had an html document that looked like:如果在您的iframe您有一个 html 文档，看起来像这样：
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>
Definitely a hack, but it might work for Firefox.绝对是一个 hack，但它可能适用于 Firefox。 Although I wonder if the load event would fire too soon in that case.虽然我想知道在这种情况下加载事件是否会触发得太快。
解决方案9
1 2013-03-21 03:02:48
I had to show a loader while pdf in iFrame is loading so what i come up with:我不得不在 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>');
}
});
I'm showing a loader.我正在展示一个装载机。 Once I'm sure that customer can see my loader, i'm calling onCompllet loaders method that loads an iframe.一旦我确定客户可以看到我的加载程序，我就会调用加载 iframe 的 onCompllet loaders 方法。 Iframe has an "onLoad" event. iframe 有一个“onLoad”事件。 Once PDF is loaded it triggers onloat event where i'm hiding the loader :)一旦 PDF 被加载，它就会触发 onloat 事件，我正在隐藏加载器:)
The important part:重要的部分：
iFrame has "onLoad" event where you can do what you need (hide loaders etc.) iFrame 具有“onLoad”事件，您可以在其中执行所需的操作（隐藏加载程序等）
解决方案10
0 2008-11-19 14:00:00
Here is what I do for any action and it works in Firefox, IE, Opera, and Safari.这是我对任何操作所做的操作，它适用于 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
0 2015-05-23 07:31:03
If you can expect the browser's open/save interface to pop up for the user once the download is complete, then you can run this when you start the download:如果您可以期望在下载完成后为用户弹出浏览器的打开/保存界面，那么您可以在开始下载时运行：
$( document ).blur( function () {
// Your code here...
});
When the dialogue pops up on top of the page, the blur event will trigger.当页面顶部弹出对话框时，会触发模糊事件。
解决方案12
0 2016-04-07 07:03:07
Since after the pdf file is loaded, the iframe document will have a new DOM element <embed/> , so we can do the check like this:由于 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
0 2016-06-22 10:46:58
The solution I have applied to this situation is to simply place an absolute loading image in the DOM, which will be covered by the iframe layer after the iframe is loaded.我针对这种情况的解决方案是简单地在DOM中放置一个绝对加载的图片，在iframe加载后会被iframe层覆盖。
The z-index of the iframe should be (loading's z-index + 1), or just higher. iframe 的 z-index 应该是 (loading's z-index + 1)，或者更高。
For example:例如：
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }
Hope this helps if no javaScript solution did.如果没有 javaScript 解决方案，希望这会有所帮助。 I do think that CSS is best practice for these situations.我确实认为 CSS 是这些情况的最佳实践。
Best regards.最好的祝福。
解决方案14
0 2021-07-20 09:20:30
function frameLoaded(element) { alert('LOADED'); };
<iframe src="https://google.com" title="W3Schools Free Online Web Tutorials" onload="frameLoaded(this)"></iframe>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.