7

我刚开始从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>

代码仍然显示旧值并且没有覆盖网页的内容。你能告诉我我做错了什么吗？

4

6 回答 6

17

在您进行测试document.readyState === "complete"时，文档的 readyState不是“完成”，而是“正在加载”，因此没有任何反应，并且loaded永远不会被调用。

你可以监听 readyState 的变化，然后检查它是否“完成”（或者听window.onload哪个更容易）：

document.addEventListener('readystatechange', e => {
  if(document.readyState === "complete"){
    loaded();
  }
});
于 2013-05-08T22:05:36.523 回答
5

因为该机制是基于事件的。你应该只在 DOM 实际加载后才使用它，所以它没有意义。

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

做事的简单方法：

window.onload = function() {
    loaded();
};
于 2013-05-08T22:06:23.810 回答
3

您需要做的是将函数挂钩到readystatechange事件，然后检查该readystate值。

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        initApplication();
    }
}
于 2013-05-08T22:11:07.220 回答
0

具有多个示例和解释的优秀资源是： https ://developer.mozilla.org/en/docs/Web/API/Document/readyState

因此，在您的情况下，这适用：

document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }
}
于 2017-04-22T16:29:44.713 回答
0

抱歉没有解释；当代码在javascript上执行时，dom没有完成，所以文档的readyState不是'完成'，那么initApplication函数将不会被调用；如果你想调用initApplication函数，你必须给文档添加一个触发器。我添加了一个触发器，比如'document.onreadystatechange'。当文档的状态发生变化时，会调用“document.onreadystatechange”；所以当文件被加载时，“document.onreadystatechange”将被调用

于 2016-08-26T04:08:31.847 回答
0

像这样写，你会得到你想要的结果

document.onreadystatechange = function(){
   if(document.readyState == 'complete'){
      document.write('document is overwrite')
   }
}
于 2016-08-26T02:31:48.330 回答