Javascript 准备好了吗？

Question

我知道我可以使用原型或 jQuery 等不同的框架将函数附加到 window.onload，但这不是我想要的。

我需要像 .readyState 这样的东西，这样我就可以做这样的事情：

if(document.isReady){
  var id = document.getElem ...
}

除了使用框架的功能之外，还有其他方法吗？

Answer 1

编辑：随着 2018 年的到来，我认为收听 DOMContentLoaded 事件是安全的。

function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}

请注意，该事件只会在您的页面加载时触发一次！如果您必须支持非常旧的浏览器，请查看我在下面整理的超轻量级脚本。

---

---

仅供历史参考：

---

---

jQuery 有一个名为 isReady 的未记录属性，它在内部用于确定是否触发了 DOM 就绪事件：

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

我从 1.5.2 开始，一直到 1.3.2，财产就在那里。虽然没有记录，但我会说您可以在 jQuery 的未来版本中依赖此属性。 编辑：一年后 - v1.7.2，他们仍然使用$.isReady - 仍然没有记录，所以请自担风险使用。升级时要小心。

编辑： v1.9，他们仍然使用$.isReady - 仍然没有记录

编辑： v2.0 进行了所有“重大”更改，仍然使用 $.isReady - 仍然没有记录

编辑： v3.x 仍然使用 $.isReady - 仍然没有记录

编辑：正如一些人所指出的，以上内容并没有真正回答这个问题。所以我刚刚创建了一个mini DOM ready snippet，它的灵感来自达斯汀迪亚兹的even smaller DOM ready snippet。 Dustin 创建了一种简洁的方法来检查文档的 readyState，类似于以下内容：

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

之所以可行是因为浏览器有 3 种加载状态：“正在加载”、“交互”和“完成”（旧的 WebKit 也使用“加载”，但您不必担心更多）。您会注意到“加载”和“交互”都包含文本“in”......所以如果在document.readyState 中找到字符串“in”，那么我们知道我们还没有准备好。

Answer 2

document.addEventListener("DOMContentLoaded", function(e){
    console.log("dom ready");//output to web browser console
});

这个不需要 JQuery。无需在 DOMContentLoaded 上传递第三个参数，因为此事件没有父级来遍历该事件。也没有必要完全看中其他人在说什么。这将告诉您 DOM 何时完全加载并准备好使用。当我注意到 DOM 助手库时，我大笑。该库是绝对没用的。

DOMContentLoaded 事件在文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载

addEventListener() 是一个很棒的函数，用于检查任何事件，包括 DOM 就绪状态。使用“DOMContentLoaded”时，不需要addEventListener() 中的第三个参数，因为此触发器也没有父项来传递事件。在我上面的例子中，你会注意到第二个参数是一个匿名函数。您还可以将函数的名称传递给第二个参数。

document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]);

在 JQuery 上使用它的另一个好处是当您更新 JQuery 时它不会中断。

Answer 3

自提出此问题以来的 5 年中，DOMContentLoaded 已成为普遍支持的事件，您可以直接使用它。

document.addEventListener('DOMContentLoaded', function() {
    //.. do stuff ..
}, false);

Answer 4

如果您想要只做特定事情的更小的库，您可以使用microjs 中的库。对于手头的问题，可以使用 DOMStatic libs ready 方法。

Answer 5

我已经更新了 DOMAssistant library 的代码，它对我来说很好用

var domReady = (function (){
  var arrDomReadyCallBacks = [] ;
  function excuteDomReadyCallBacks(){
       for (var i=0; i < arrDomReadyCallBacks.length; i++) {
         arrDomReadyCallBacks[i]();
       }
       arrDomReadyCallBacks = [] ;
  }

  return function (callback){
    arrDomReadyCallBacks.push(callback);
     /* Mozilla, Chrome, Opera */
      if (document.addEventListener ) {
          document.addEventListener('DOMContentLoaded', excuteDomReadyCallBacks, false);
      }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        browserTypeSet = true ;
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                //callback();
                excuteDomReadyCallBacks();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */

    window.onload = excuteDomReadyCallBacks;
}
})()

Answer 6

试试这个：
链接：onDomReady at GitHub 或以下来源：

if(document.ondomready == undefined) {
    document.ondomready = {};
    document.ondomready = null;
} else {
    document.ondomready=document.ondomready;
}
var oldonload=document.onload;
var isLaunched = 0;
document.onload = function() {  
    if(oldonload !== null) {
        oldonload.call();
    }
};
document.addEventListener("DOMContentLoaded", function onDom(evt) {
    var olddomready = document.ondomready;
    if(olddomready !== null) {
        if(isLaunched == 0) {
            olddomready.call(evt);
            isLaunched == 1;
            //We now launched the mapped DOMContentLoaded Event
        } else {
            //We already launched DOMContentLoaded Event
        }
    }
}, false);

我已经在 Opera 11.x/12.x 上对此进行了测试。尚未在其他人身上进行测试。让我知道他们是否这样做。

注意：我还没有上传存储库，但我会尽快在我的空闲时间。

Answer 7

看看这个来自微软的演示。 -> http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html 这里是允许你在 DOM 上运行 JS 的代码要点...

(function () {
    function load2(){
        // put whatever you need to load on DOM ready in here
        document.getElementById("but3").addEventListener("click", doMore, false);
    }
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', load2, false);
    } else {
        window.attachEvent('onload', load2);
    }
} ());

这里是演示的一些 javascript 源代码。 http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js

效果很好。不错！！...在谷歌浏览器和 IE 9 上。

Answer 8

jQuery 不使用window.onload。

$(document).ready() 等到 DOM 加载完毕并且可以被遍历（到那时可能会或可能不会加载其余内容）。

如果你调出 jQuery 的源代码并整理混乱，你会发现工作是由 bindReady() 方法完成的，该方法针对不同的浏览器有几种不同的实现，只有当所有这些实现都失败时，它才会失败重新监听窗口的加载事件。

Answer 9

虽然我通常主张在必要时避免使用框架，但我想说在这种情况下使用框架是完全可以的。这是 jQuery：

$(function () {
    // do stuff after DOM has loaded
});

请注意，它与window.onload 事件不同，因为onload 在其他资源（图像等）加载后首先执行。我在示例中使用的代码将在 DOM 完成加载后执行，即，当完整的 HTML 结构可用时（不一定当图像、CSS 等可用时）。

如果你想要一个可检查的变量，你可以在 ready-function 中设置一个：

var documentIsReady = false;
$(function () { documentIsReady = true; });

当然，如果您只想检查 DOM 就绪，您可以找到比 jQuery 更多的轻量级库。但是在不同浏览器的行为非常不同的情况下使用库（这是一种情况。）

使用DOMAssistant library 中的一些代码，制作您自己的“DOM 就绪”函数应该不会太难：

var domLoaded = function (callback) {
    /* Internet Explorer */
    /*@cc_on
    @if (@_win32 || @_win64)
        document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
        document.getElementById('ieScriptLoad').onreadystatechange = function() {
            if (this.readyState == 'complete') {
                callback();
            }
        };
    @end @*/
    /* Mozilla, Chrome, Opera */
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback, false);
    }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                callback();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */
    window.onload = callback;
};

未经测试，但它应该可以工作。我从 DOMAssistant 简化了它，因为 DOMAssistant 允许多个回调，并且检查以确保您不能两次添加相同的函数等。

Answer 10

这实际上是大多数人使用 jQuery 等框架的最大原因之一，因为解决方案在浏览器之间并不一致。