让脚本等到 iframe 加载完毕后再运行

Posted 2023-05-09

【中文标题】让脚本等到 iframe 加载完毕后再运行

【英文标题】：Making script wait until iframe has loaded before running

【发布时间】：2013-06-30 11:41:41

【问题描述】：

我正在处理的网站在 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">');
   
);

但都没有用

【参考方案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
);

【讨论】：

建议 $('iframe').on('load', function()some code here...); 在 jQuery 历史的某个时刻，$element.load() 停止了这样的工作。

@BobStein-VisiBone 哈哈是真的。我从 4 年前更新了我的答案。谢谢:)

【参考方案2】：

绑定到 iframe 的加载事件的另一种方法是在向 iframe 添加 src 标记之前将加载侦听器附加到 iframe。

这是一个简单的例子。这也适用于您无法控制的 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】：

从 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>