0

请帮我解决检测异步脚本何时加载的问题。实际上，我的网站上有一个异步加载的实时聊天按钮，这个小部件的脚本被混淆了。加载此脚本后，我需要在聊天按钮上设置一个事件监听器。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，您可以在加载时附加一个回调。这就是大多数其他库（如谷歌地图、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 回答