使脚本等到iframe加载后再运行

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上有一个Live Chat插件。如果没有可用的代理,我正在尝试更改图像。我的代码在控制台上运行,但网站上没有任何内容。

          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

但都没有奏效

3 个解决方案

#1

The best solution is to define a function in your parent such as function iframeLoaded(){...} and then in the iframe use:

最好的解决方案是在父级中定义一个函数,例如函数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 load event 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
});

#2

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事件的另一种方法是在向iframe添加src标记之前将加载侦听器附加到iframe。

Here's a simple example. This will also work with iframes that you don't control.

这是一个简单的例子。这也适用于您无法控制的iframe。

http://jsfiddle.net/V42ts/

// First add the listener.
$("#frame").load(function(){
    alert("loaded!");
});

// Then add the src
$("#frame").attr({
    src:"https://apple.com"
})

#3

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>

#1