Javascript 为什么document.write创建的文档在写入的一部分参与超时块时呈现不同？
页面的代码为： 该网站是： 浏览器是Chrome 如果渲染发生在单个块中，则inspect元素应如下所示： 如果我用timeout-like调用它，以便稍后写入主体，然后在写入所有内容后检查元素，如下所示： 头部部分是空的。但图标仍被渲染 我不明白为什么会这样Javascript 为什么document.write创建的文档在写入的一部分参与超时块时呈现不同？,javascript,html,dynamic,write,Javascript,Html,Dynamic,Write,页面的代码为： 该网站是： 浏览器是Chrome 如果渲染发生在单个块中，则inspect元素应如下所示： 如果我用timeout-like调用它，以便稍后写入主体，然后在写入所有内容后检查元素，如下所示： 头部部分是空的。但图标仍被渲染 我不明白为什么会这样 我有一个更复杂的页面，有几次写入，其中根本没有呈现图标。我无法将后一个错误缩小到某个简单的示例中，但尝试这样做时，至少我遇到了这个奇怪的检查渲染，我可以复制它。对于标题中的问题，当您尝试从setTimeout加载新标题时，文档已通过回
我有一个更复杂的页面，有几次写入，其中根本没有呈现图标。我无法将后一个错误缩小到某个简单的示例中，但尝试这样做时，至少我遇到了这个奇怪的检查渲染，我可以复制它。对于标题中的问题，当您尝试从setTimeout加载新标题时，文档已通过回调
document.open（）文档之后初始化新的标题元素。在setTimeout（）中调用write（）
，请记住定义是：
Document.write（）方法将文本字符串写入Document.open（）打开的文档流
参考：
解决方案
实例：
沙箱
源代码
第一视图标题
函数addHeaderElements（）{
//创建新常量以保留addHeaderMeta
var headerTag=document.getElementsByTagName（“head”）；
//创建新标题
var newTitle=document.createElement（“标题”）；
var titleText=document.createTextNode（“动态标题”）；
newTitle.appendChild（titleText）；
headerTag[0]。appendChild（newTitle）；
}
函数dynamicFavicon（）{
//动态更改favicon
var headerTag=document.getElementsByTagName（“head”）；
var newLink=document.createElement（“链接”）；
setAttribute（“rel”、“icon”）；
setAttribute（“类型”、“图像/x图标”）；
newLink.setAttribute（“href”https://stackoverflow.com/favicon.ico");
headerTag[0]。appendChild（新链接）；
}
函数writeBody（）{
document.write（`dynamicpage`）；
addHeaderElements（）；
dynamicFavicon（）；
}
if（document.location.href.match（/timeout/）{
dynamicFavicon（）；
setTimeout（（）=>writeBody（），5000）；
}否则{
书面文件（“第一次查看”）；
}
默认情况下，Favicon会被请求提供相关问题的附加链接以获取更多信息
该文档不是您首先想到的文档。当document.write不在解析阶段运行时，它就是这样做的。找到另一种方法来修改DOM。好的。我有一个自己的动态页面构建DOM包装器（您可以在中看到它的操作），但我不想为相对简单的单文件页面调用它，独立于主站点托管，我想我可以用write来完成，我通常不会这么做。因此，它不像人们天真地期望的那样起作用。感谢您提供此信息。感谢您提供此详细答案并指出文档的正确定义。请编写。我想以答案的方式设置标题一定是出于教育原因，因为您可以只做document.title=“dynamic title”
。绝对可以@easychessanimations您是对的，尽管newLink
还具有（rel，type，href）属性，您可以通过newLink.rel=“icon”修改它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>First View Title</title>
<link rel="icon" type="image/x-icon" href="https://stackoverflow.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://stackoverflow.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>