首页 文章

如何在没有框架的情况下检查DOM是否准备就绪？

提问于
浏览 次
53

这个问题就像在这里和网络上的其他人一样 - 如何检查DOM是否已加载Javascript？但这里有一个问题：

  • 不使用像jQuery等框架;

  • 不知道你的脚本是否已经通过静态放置的 <script> 标签加载，或者在DOM加载后很久以后通过其他一些Javascript加载 .

这可以或多或少可靠地完成并且具有跨浏览器兼容性吗？

Added: 让我澄清一下：我正在写一个独立的.JS文件，它可以包含在任意网页中 . 我想执行已加载DOM的代码 AFTER . 但我不知道 HOW 我的剧本将被包括在内 . 可以通过放置一个 <script> 标签（在这种情况下，传统的 onload 或DOM-readyiness解决方案将起作用）;或者它可以通过AJAX或其他方式加载，在DOM已经加载之后很久（因此前面提到的解决方案永远不会触发） .

javascript dom domready

6 回答

  • 2

    document.readyState属性可用于检查文档是否已准备好：

    if(document.readyState === "complete") {
  //Already loaded!
}
else {
  //Add onload or DOMContentLoaded event listeners here: for example,
  window.addEventListener("onload", function () {/* your code here */}, false);
  //or
  //document.addEventListener("DOMContentLoaded", function () {/* code */}, false);
}
    回复于
  • 8

    Firefox，Opera和基于Webkit的浏览器都有一个文档级事件 DOMContentLoaded ，您可以使用 document.addEventListener("DOMContentLoaded", fn, false) 进行监听 .

    它在IE中更复杂 . jQuery在IE中做的是在特定的readystate的document对象上查看 onreadystatechange ，并备份document.onload事件 . document.onload会在DOM准备就绪之后触发（仅当所有图像都已完成加载时）才会因某种原因而起作用 .

    如果你花一些时间谷歌搜索，你会找到代码来做到这一点 . 我认为执行此操作最多的代码是在jQuery和YUI等大型框架中，因此，即使我不使用该框架，我也会查看其源代码中的技术 .

    这是 document.ready() 的jQuery 1.6.2源代码的主要部分：

    bindReady: function() {
    if ( readyList ) {
        return;
    }

    readyList = jQuery._Deferred();

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent( "onreadystatechange", DOMContentLoaded );

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},
    回复于
  • 7

    这适用于所有浏览器，简洁明了：

    var execute = function () {
  alert("executing code");  
};

if ( !!(window.addEventListener) )
  window.addEventListener("DOMContentLoaded", execute)
else // MSIE
  window.attachEvent("onload", execute)
    回复于
  • 4

    如果依赖 document.readyState 是好的，快速而肮脏的解决方案与轮询：

    (function() {
    var state = document.readyState;
    if(state === 'interactive' || state === 'complete') {
        // do stuff
    }
    else setTimeout(arguments.callee, 100);
})();
    回复于
  • 10

    当初始HTML文档被完全加载和解析时， DOMContentLoaded 事件被触发，而不需要等待样式表，图像和子帧完成加载 . 好的东西是chrome，firefox，IE9，opera和safari同样支持它

    document.addEventListener("DOMContentLoaded", function(event) 
{
    console.log("DOM fully loaded and parsed");
}

    注意：Internet Explorer 8支持readystatechange事件，该事件可用于检测DOM何时就绪 .

    回复于
  • 59

    这是通过在页面底部运行脚本的一种方法 . 此外，通过使用window.onload，您可以等待加载所有图像/脚本 . 或者你可以简单地将代码放在底部，而不是等待加载图像 .

    <html>
<head>
</head>
<body>
</body>
<script language="text/javascript">
  window.onload = (function (oldOnLoad) {
    return function () {
      if (oldOnLoad) { 
        olOnLoad();  //fire old Onload event that was attached if any.
      }
      // your code to run after images/scripts are loaded
    }
  })(window.onload);

  // your code to run after DOM is loaded
</script>
</html>

    Edited: for Vilx's Comment

    这里的许多onload绑定都是一个例子http://jsfiddle.net/uTF2N/3/

    回复于

相关问题