确定是否在不使用任何全局变量的情况下加载了窗口

Determining whether the window has loaded without using any global variables

本文关键字：全局变量 情况下 加载 窗口 任何 是否      更新时间：2023-10-21

我需要了解窗口是否已加载。

我想创建一个checkLoaded函数，根据我调用它的时间，它将返回true或false来指示这一点。

<html>
<head>
  function checkLoaded(){
    //alert true if window is loaded or alert false
  }
</head>
<body onload="checkLoaded()"> <!-- This should alert true -->
   Loding window.
   <script>
       checkLoaded();// this should alert false;
   </script>
</body>
</html>

我不想使用我在加载窗口时设置的全局变量。

有没有什么方法可以检查window对象的状态，也许是一个属性？

我不想使用jQuery或任何其他外部库。

您可以使用document.readyState属性来检查文档是否已加载，而无需侦听任何事件。如果文档和所有子资源都已加载，它将设置为"complete"检查。（这对应于load事件。）

function checkLoaded() {
  return document.readyState === "complete";
}

如果只想检查文档是否已加载，而不必担心子资源，也可以检查属性是否为"interactive"。

function checkLoaded() {
  return document.readyState === "complete" || document.readyState === "interactive";
}

这应该适用于当前浏览器，但并非所有浏览器的旧版本都支持。

您有两个可用事件：

addListener(document, "DOMContentLoaded", function(){});  //Dom parsing is finished
addListener(window, "load", function(){}); //loading of all external stuff is done

您可以在这里看到

中的差异

也许只是这样：

<html>
<script>
  var loaded = false;
  function checkLoaded(){
     alert(window.loaded);
  }
</script>
<body onload="window.loaded = true; checkLoaded()">
   Loading window.
   <script>
       checkLoaded();
   </script>
</body>
</html>

加载窗口时会发出警报：

(function(w) {
    //private variable
    var loaded = false;
    w.onload = function() {
        loaded = true;
    };
    w.checkLoaded = function() {
        alert(loaded);
    };
})(window);

您现在可以从应用程序的任何部分调用checkLoaded()，它将返回true或false。

相关文章：