Question

请帮我解决加载异步脚本的问题。实际上我的网站上有一个实时聊天按钮异步加载，这个小部件的脚本被篡改。我需要在加载此脚本后在聊天按钮上设置eventlistener。 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);
})();

Answer 1

最好的选择是，如果您的聊天按钮有一个API，您可以在加载时附加回调。这就是谷歌地图，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);

Answer 2

在底部块的内部，脚本加载块，为脚本添加一个监听器。

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

在之前设置.onload ，将文件附加到DOM。
安全的方法是将它放在你为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(); }; } }

将它们放在一起放在页面上有点难看，但是知道脚本何时加载并完成运行是一个非常简单的修复。

耦合异步脚本

2 个答案: