0

非同期スクリプトがいつロードされるかを検出する際の問題を解決するのを手伝ってください。実際、私の Web サイトには非同期で読み込まれるライブ チャット ボタンがあります。このウィジェットのスクリプトは難読化されています。このスクリプトがロードされた後、チャット ボタンにイベント リスナーを設定する必要があります。チャット ボタンが表示される前に Window.onload がトリガーされます。お知らせ下さい。

コード：

_shcp = [];
_shcp.push({
    widget_id: xxxxxx,
    widget: "Chat",
    side: "left",
    position: "center",
    template: "orange",
    title: "Live help",
    text_layout: "trans",
    track: 1
});
(function () {
    var hcc = document.createElement("script");
    hcc.type = "text/javascript";
    hcc.async = true;
    hcc.src = ("https:" == document.location.protocol ? "https" : "http") + "://widget.siteheart.com/apps/js/sh.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hcc, s.nextSibling);
})();
4

2 に答える 2

0

最適なオプションは、チャット ボタンに、読み込み時にコールバックをアタッチできる API がある場合です。これは、Google マップ、YUI、jQuery などの他のほとんどのライブラリが要素の動的読み込みを処理する方法です。

しかし、それが利用できない場合、次の最善の策は、要素の存在をポーリングすることです。

setTimeout(function checkChatButton (){
    var button = document.getElementById(chat_button_id);
    if (button) {
        /* Button is loaded!
         *
         * Do what you need to do here
         */
    }
    else {
        setTimeout(checkChatButton,500);
    }
},500);
于 2012-11-20T06:27:58.510 に答える
0

一番下のブロックであるスクリプト読み込みブロックの内部で、スクリプトにリスナーを追加します。

hcc.onload = function () {
    var button = document.getElementById("the_button");
    button.onclick = function () { doStuff(); };
};

ファイルが DOM に追加される.onload 前に設定します。
安全な方法は、AJAX 呼び出しまたはイメージ ロード (が設​​定される前) のリスナーを設定したのと同じ場所に配置することですsrc。
覚えておきたい場合は、スクリプトをページに追加するまでスクリプトは実際にはロードを開始しませんが、画像は設定するとすぐにロードされます.src。ソースを設定する前にリスナーを設定すると、毎回覚える必要がなくなります。これ。

これを行うには、より優れた DOM-3.0 の方法がありますが、それは素晴らしくシンプルです。

IE7 以下をサポートする必要がある場合は、.onreadystatechange代わりにリッスンする必要があります。

hcc.onreadystatechange = function () {
    if (hcc.readyState === "loaded" || hcc.readyState === "complete") {
        var button = document.getElementById("the_button");
        button.onclick = function () { doStuff(); };
    }
}

両方をページにまとめなければならないのは少し見苦しいですが、スクリプトがいつ読み込まれて実行が終了したかを知るための非常に簡単な修正です。

于 2012-11-20T06:50:23.223 に答える