【问题标题】:Making script wait until iframe has loaded before running让脚本等到 iframe 加载完毕后再运行
【发布时间】: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">');
   }
});

但都没有用

【问题讨论】:

    标签: javascript jquery iframe


    【解决方案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");
      });
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-12-19
        • 1970-01-01
        • 1970-01-01
        • 2016-07-31
        • 2016-08-02
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多