Javascript jQuery iframe load() 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5788499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery iframe load() event?
提问by Alex
Does anyone know if there is such a thing?
有谁知道是否有这样的事情？
I have a iframe that's being inserted with $.ajax()and I want to do some stuff after the contents from the iframe are completely loaded:
我有一个正在插入的 iframe，$.ajax()我想在 iframe 中的内容完全加载后做一些事情：
....
success: function(html){ // <-- html is the IFRAME (#theiframe)
$(this).html(html); // $(this) is the container element
$(this).show();
$('#theiframe').load(function(){
alert('loaded!');
}
....
it works, but I see the IFRAME is loaded twice (the alert also shows twice).
它有效，但我看到 IFRAME 加载了两次（警报也显示了两次）。
回答by m-khonsari
回答by Tim Down
If possible, you'd be better off handling the loadevent within the iframe's document and calling out to a function in the containing document. This has the advantage of working in all browsers and only running once.
如果可能，您最好load在 iframe 的文档中处理事件并调用包含文档中的函数。这具有在所有浏览器中工作且仅运行一次的优点。
In the main document:
在主文档中：
function iframeLoaded() {
alert("Iframe loaded!");
}
In the iframe document:
在 iframe 文档中：
window.onload = function() {
parent.iframeLoaded();
}
回答by Oliver
Along the lines of Tim Down's answerbut leveraging jQuery(mentioned by the OP) and loosely coupling the containing page and the iframe, you could do the following:
沿着Tim Down 的回答，但利用jQuery（由 OP 提到）并将包含页面和 iframe 松散耦合，您可以执行以下操作：
In the iframe:
在 iframe 中：
<script>
$(function() {
var w = window;
if (w.frameElement != null
&& w.frameElement.nodeName === "IFRAME"
&& w.parent.jQuery) {
w.parent.jQuery(w.parent.document).trigger('iframeready');
}
});
</script>
In the containing page:
在包含页面中：
<script>
function myHandler() {
alert('iframe (almost) loaded');
}
$(document).on('iframeready', myHandler);
</script>
The iframe fires an event on the (potentially existing) parent window's document - please beware that the parent document needs a jQuery instance of itself for this to work. Then, in the parent window you attach a handler to react to that event.
iframe 在（可能存在的）父窗口文档上触发一个事件 - 请注意父文档需要一个自身的 jQuery 实例才能工作。然后，在父窗口中附加一个处理程序以对该事件作出反应。
This solution has the advantage of not breaking when the containing page does not contain the expected load handler. More generally speaking, it shouldn't be the concern of the iframe to know its surrounding environment.
当包含页面不包含预期的加载处理程序时，此解决方案的优点是不会中断。更一般地说，iframe 不应该关心了解其周围的环境。
Please note, that we're leveraging the DOM ready event to fire the event - which should be suitable for most use cases. If it's not, simply attach the event trigger line to the window's load event like so:
请注意，我们正在利用 DOM 就绪事件来触发事件 - 这应该适用于大多数用例。如果不是，只需将事件触发线附加到窗口的加载事件，如下所示：
$(window).on('load', function() { ... });
回答by Piskvor left the building
That's the same behavior I've seen: iframe's load()will fire first on an empty iframe, then the second time when your page is loaded.
这与我见过的行为相同：iframeload()将首先在空 iframe 上触发，然后在您的页面加载时第二次触发。
Edit: Hmm, interesting. You could increment a counter in your event handler, and a) ignore the first loadevent, or b) ignore any duplicate loadevent.
编辑：嗯，有趣。您可以在事件处理程序中增加一个计数器，并且 a) 忽略第一个load事件，或 b) 忽略任何重复的load事件。
回答by Jérome Obbiet
Without code in iframe + animate:
iframe + animate 中没有代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
jQuery(document).ready(function($) {
$(obj).animate({height: obj.contentWindow.document.body.scrollHeight + 'px'}, 500)
});
}
</script>
<iframe width="100%" src="iframe.html" height="0" frameborder="0" scrolling="no" onload="resizeIframe(this)" >
回答by suhair
回答by Bahad?r Birs?z
If you want it to be more generic and independent, you can use cookie. Iframe content can set a cookie. With jquery.cookie and a timer (or in this case javascript timer), you can check if the cookie is set each second or so.
如果你想让它更通用和独立，你可以使用 cookie。iframe 内容可以设置 cookie。使用 jquery.cookie 和计时器（或在本例中为 javascript 计时器），您可以检查 cookie 是否每秒设置一次。
//token should be a unique random value which is also sent to ifame to get set
iframeLoadCheckTimer = window.setInterval(function () {
cookieValue = $.cookie('iframeToken');
if (cookieValue == token)
{
window.clearInterval(iframeLoadCheckTimer );
$.cookie('iframeToken', null, {
expires: 1,
path: '/'
});
}
}, 1000);
