jQuery 使脚本等待 iframe 加载后再运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17436881/
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
Making script wait until iframe has loaded before running
提问by Hyman Pilowsky
The site I'm working on has a Live Chat plugin on an iframe. I'm trying to change an image if there are no agents available. My code works on the console, but nothing on the site.
我正在开发的网站在 iframe 上有一个实时聊天插件。如果没有可用的代理，我正在尝试更改图像。我的代码在控制台上工作，但在网站上没有。
var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
if (LiveChatStatus =="Offline"){
$('#liveChat').html('<img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png">');
}
I tried this:
我试过这个：
$('iframe').ready(function(){
var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
if (LiveChatStatus =="Offline"){
$('#liveChat').html('<img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png">');
}
});
And this:
和这个：
$(document).ready(function(){
var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
if (LiveChatStatus =="Offline"){
$('#liveChat').html('<img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png">');
}
});
But neither worked
但都没有奏效
回答by Yotam Omer
The best solution is to define a function in your parent such as function iframeLoaded(){...}and then in the iframe use:
最好的解决方案是在您的父级中定义一个函数function iframeLoaded(){...}，然后在 iframe 中使用：
$(function(){
parent.iframeLoaded();
})
this works cross-browser.
这可以跨浏览器工作。
If you cannot change the code within the iframe, your best solution will be to attach the loadevent to the iframe..
如果您无法更改 iframe 中的代码，最好的解决方案是将load事件附加到 iframe 中。
$(function(){
$('iframe').on('load', function(){some code here...}); //attach the load event listener before adding the src of the iframe to prevent from the handler to miss the event..
$('iframe').attr('src','http://www.iframe-source.com/'); //add iframe src
});
回答by sissonb
Another way to bind to the load event of an iframe is to attach a load listener to the iframe before adding a src tag to the iframe.
绑定到 iframe 的 load 事件的另一种方法是在将 src 标记添加到 iframe 之前将加载侦听器附加到 iframe。
Here's a simple example. This will also work with iframes that you don't control.
这是一个简单的例子。这也适用于您无法控制的 iframe。
// First add the listener.
$("#frame").load(function(){
alert("loaded!");
});
// Then add the src
$("#frame").attr({
src:"https://apple.com"
})
回答by Matt
Found this from Elijah Manor's website which works very well
从 Elijah Manor 的网站上找到了这个，效果很好
function iFrameLoaded(id, src) {
var deferred = $.Deferred(),
iframe = $("<iframe class='hiddenFrame'></iframe>").attr({
"id": id,
"src": src
});
iframe.load(deferred.resolve);
iframe.appendTo("body");
deferred.done(function() {
console.log("iframe loaded: " + id);
});
return deferred.promise();
}
$.when(iFrameLoaded("jQuery", "http://jquery.com"), iFrameLoaded("appendTo", "http://appendto.com")).then(function() {
console.log("Both iframes loaded");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>