为什么没有为document.readyState加载javascript ==="完成"

ash*_*ish 6 javascript html5

我刚开始从w3school学习javascript ,我发现"你只能在HTML输出中使用document.write.如果在文档加载后使用它,整个文档将被覆盖." 所以我试着编写以下代码来检查有效性:

<html>
    <head>
        <title>ashish javascript learning</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <p> sample html with javascript </p>
        <script>
            document.write("<h1>this is heading</h1>");
            document.write("<p>this is sample para</p>");
        </script>
        <script>
            if(document.readyState === "complete"){
                loaded();
            }
            function loaded(){
                document.write("<p>loading content after the document has been loaded");
            }
        </script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

代码仍然显示旧值,并且不会覆盖网页的内容.你能告诉我我做错了什么吗?

mea*_*gar 15

在您进行测试时document.readyState === "complete",文档的readyState 不是 "完整",它是"加载",因此没有任何反应,并且loaded永远不会被调用.

您可以侦听readyState进行更改,然后检查它是否"完整"(或者听window.onload哪个更容易):

document.onreadystatechange = function () {
  if(document.readyState === "complete"){
    loaded();
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 避免给 `document.onreadystatechange` 赋值而是使用 `document.addEventListener('readystatechange', function(evt) {})` (2认同)

fla*_*ian 5

因为该机制是基于事件的。您应该只在实际加载 DOM 后使用它,所以它毫无意义。

评估已就地完成,但在评估时document.readyState == "complete"false,因此没有任何反应。

做事的简单方法:

window.onload = function() {
    loaded();
};
Run Code Online (Sandbox Code Playgroud)