时间戳

首页 > 解决方案 > 在 DOM 可修改/可交互时运行 javascript

javascript - 在 DOM 可修改/可交互时运行 javascript

问题描述

我们有将元素注入 DOM 的 javascript 代码。因此它需要等到 DOM 处于所需状态。

我们为此使用以下内容：

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        if (!tagsPlaced)
            placeTags();
    }
};

var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a);};
DOMReady(function () {
    if (!tagsPlaced)
        placeTags();
});

当某个站点的脚本加载缓慢或未加载时，它永远不会触发这些事件。

从用户的角度来看，该站点是完全可用的，如果我们手动调用“placeTags”，它也可以正常工作。

一种解决方案是从页面的页脚调用“placeTags”。不幸的是，我们需要支持在页面的任何位置加载 javascript。

可以做什么？

标签： javascriptdomreadystatedomcontentloaded

解决方案

使用代码标签defer上的属性script，并在评估脚本时立即运行代码，而不是等待。所有甚至模糊的现代浏览器（包括 IE10 和 IE11）都支持该defer属性：

<script src="/path/to/your/script" defer></script>

如果由于某种原因你不能这样做（或不能依赖它完成），你可以检测它placeTags需要什么（不管是什么）并使用setTimeout循环直到/除非那个东西出现。例如，如果您需要等待特定元素出现在 DOM 中，则可能如下所示：

(function boot(retries) {
    if (/*...condition your script needs is met...*/) {
        placeTags();
    } else {
        if (--retries <= 0) {
            // Give up, it's been at least a minute (100ms * 600 retries)
        } else {
            // Try again in 100ms
            setTimeout(boot, 100, retries);
        }
    }
})(600);

推荐阅读