javascript - 让脚本等到 iframe 加载后再运行

Question

我工作的网站在 iframe 上有一个在线聊天插件。如果没有可用的代理，我正在尝试更改图像。我的代码在控制台上有效，但在网站上没有任何作用。

var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
if (LiveChatStatus =="Offline"){
    $('#liveChat').html('<img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png">');
}

我试过这个:

$('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">');
    }
});

还有这个:

$(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">');
   }
});

但是都没有用

Answer 1

最好的解决方案是在您的父级中定义一个函数，例如 function iframeLoaded(){...}，然后在 iframe 中使用:

$(function(){
    parent.iframeLoaded();
})

这适用于跨浏览器。

如果您不能更改 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
});