如果部分写入参与超时块，为啥由 document.write 创建的文档呈现方式不同？
Posted
技术标签:
【中文标题】如果部分写入参与超时块，为啥由 document.write 创建的文档呈现方式不同？【英文标题】：Why is document created by document.write rendered differently if part of the write takes part in a timeout block?如果部分写入参与超时块，为什么由 document.write 创建的文档呈现方式不同？ 【发布时间】：2021-01-26 17:06:21 【问题描述】：页面代码为：https://github.com/easychessanimations/htmltest/blob/main/dynamic.html。
网站是：https://htmltestsite.netlify.app/dynamic.html。
浏览器是 Chrome。
如果渲染发生在单个块中，则检查元素应如下所示：
如果我用https://htmltestsite.netlify.app/dynamic.html?timeout 之类的超时调用它，以便稍后编写正文，然后在编写完所有内容后检查元素，如下所示：
头部是空的。但图标仍然呈现。
我很困惑为什么会这样。
我有一个更复杂的页面，其中包含多次写入，其中根本没有呈现图标。我无法将后一个错误缩小到一些简单的示例，但尝试这样做至少我遇到了这个奇怪的检查渲染，我可以重现。
【问题讨论】：
文档不是你最先想到的文档。这就是 document.write 在解析阶段不运行时所做的事情。找到另一种修改 DOM 的方法。 好的。我有一个用于动态页面构建的自己的 DOM 包装器（您可以在 easychess.herokuapp.com 中看到它的操作），但我不想为相对简单的单个文件页面调用它，独立于主站点托管，我想我可以做到写，我通常不这样做。所以它不会像人们天真期望的那样工作。感谢您提供此信息。 【参考方案1】：对于标题中的问题，当您尝试从 setTimeout 加载新标题而文档已通过回调 document.open() 加载时。
开箱即用的解决方案
确保在 document.write() 在 setTimeout() 内部调用之后初始化新的标题元素，并记住定义是：
Document.write() 方法将文本字符串写入由 document.open() 打开的文档流。
参考：developer.mozilla.org
解决方案
实时示例：https://1cldn.csb.app/?timeout
沙盒
View in codesandbox.io
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>First View Title</title>
<link rel="icon" type="image/x-icon" href="https://***.com/favicon.ico" />
</head>
<script type="text/javascript">
function addHeaderElements()
// Create new const to hold on to your addHeaderMeta
var headerTag = document.getElementsByTagName("head");
// Create New Title
var newTitle = document.createElement("title");
var titleText = document.createTextNode("dynamic title");
newTitle.appendChild(titleText);
headerTag[0].appendChild(newTitle);
function dynamicFavicon()
// Change favicon dynamically
var headerTag = document.getElementsByTagName("head");
var newLink = document.createElement("link");
newLink.setAttribute("rel", "icon");
newLink.setAttribute("type", "image/x-icon");
newLink.setAttribute("href", "https://***.com/favicon.ico");
headerTag[0].appendChild(newLink);
function writeBody()
document.write(`dynamic page`);
addHeaderElements();
dynamicFavicon();
if (document.location.href.match(/timeout/))
dynamicFavicon();
setTimeout((_) => writeBody(), 5000);
else
document.writeln("First View");
</script>
</html>
默认情况下会请求 Favicon 我附加了相关问题的链接以获取更多信息 How to prevent favicon.ico requests?
【讨论】：
感谢您提供详细的答案并指出document.write 的正确定义。我想以答案的方式设置标题一定是出于教育原因，因为您可以这样做 document.title = "dynamic title" 。
绝对！ @easychessanimations 你是对的，虽然newLink 也有 (rel, type, href) 的属性，你可以通过newLink.rel = "icon";修改它以上是关于如果部分写入参与超时块，为啥由 document.write 创建的文档呈现方式不同？的主要内容，如果未能解决你的问题，请参考以下文章