功能检测支持DOMContentLoaded事件

3 回答

• 3

  我从mozilla开发者网站找到了关于usage of the DOMContentLoaded event的以下解释非常有用 . 最后，它讨论了向后兼容的方法，以实现相同的事情，我在这里提取（毫不奇怪，它集中在IE）...

  Internet Explorer 8支持readystatechange事件，该事件可用于检测DOM何时就绪 . 在早期版本的Internet Explorer中，可以通过反复尝试执行document.documentElement.doScroll（“left”）;来检测此状态，因为此代码段将抛出错误，直到DOM准备就绪 .

  回复于 2024-05-03T07:55:43+08:00
• 0

  只听所有三个事件，第一个触发胜利 . 如果获胜者是DOMContentLoaded，则支持 . 如果在触发其他两个触发时未触发，则不支持 .

  <script>
      var hasDOMContentLoaded = false,
          ready = false,
          readyMethod = null;
  
      // Listen for "DOMContentLoaded"
      document.addEventListener("DOMContentLoaded", function(event) {
          hasDOMContentLoaded = true;
          init("DOMContentLoaded");
      });
  
      // Listen for "onreadystatechange"
      document.onreadystatechange = function () { init("onreadystatechange"); }
  
      // Listen for "load"
      document.addEventListener("load", function(event) { init("load"); });
  
      // Gets called after any one of the above is triggered. 
      function init(method) {
          if(!ready) {
              ready = true;
              readyMethod = method;
              go();
          }
      }
  
      // Page is ready, time is up. 
      // Eitehr DOMContentLoaded has been triggered or it never will.
      function go() {
          console.log("hasDOMContentLoaded: ", hasDOMContentLoaded);
          // My initialization code here
      }
  
  </script>
  

  回复于 2024-05-03T07:55:43+08:00
• 1

  实际上和事实上，不需要DOMContentLoaded事件 . 由于html流加载原理，如果文档HTML被完全解析，则可以使用任何脚本来确定 .

  您所要做的就是在文档的结束标记之前放置函数（否则将分配给DOMContentLoaded事件） .

  它将在最后一个HTML元素被解析为DOM之后执行，它将比内置的DOMContentLoaded更快更早地执行 .

  回复于 2024-05-03T07:55:43+08:00