耦合异步脚本

Question

请帮我解决一下异步脚本何时加载的检测问题。实际上我在我的网站上有一个异步加载的实时聊天按钮，这个小工具的脚本是模糊的。我需要在此脚本加载后设置聊天按钮上的事件侦听器。在出现聊天按钮之前触发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(); };
};

在将文件附加到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(); };
    }
}

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