21

私が取り組んでいるサイトには、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">');
   }
});

しかし、どちらも機能しませんでした

4

3 に答える 3

36

最善の解決策は、次のように親で関数を定義してから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
});
于 2013-07-02T22:38:07.923 に答える
8

iframe のロード イベントにバインドするもう 1 つの方法は、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"
})
于 2013-07-02T22:54:38.273 に答える
1

非常にうまく機能するElijah ManorのWebサイトからこれを見つけました

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>

于 2016-12-01T21:18:12.413 に答える