你能强制 document.write 什么时候写到 head 什么时候写到 body 吗？答案

【问题标题】：Can you force document.write when to write to head and when to body?你能强制 document.write 什么时候写到 head 什么时候写到 body 吗？
【发布时间】：2021-04-12 05:01:32
【问题描述】：

document.write 似乎可以自己弄清楚何时写入头部以及何时写入主体。

例如，它将<style> 和<script> 写入头部，将<div> 写入主体。

是否可以避免这种自动行为并让程序员决定去哪里？

我用 iframe 对此进行了实验。不幸的是，这里的内部代码框似乎不支持与 iframe 交互，所以请看in JSFiddle。

var theiframe=document.getElementById('testing'), output=document.getElementById('output'), thebody=document.getElementById('output_body'), thehead=document.getElementById('output_head'), thebody=document.getElementById('output_body');
console.clear();
console.group('Testing');
theiframe.contentWindow.document.open();
theiframe.contentWindow.document.writeln("<script>var foo1='head';<\/script>");
theiframe.contentWindow.document.writeln("<script>var foo2='body';<\/script>");
theiframe.contentWindow.document.close();
console.log(theiframe.contentWindow.document.documentElement);
thehead.value = theiframe.contentWindow.document.head.innerHTML;
thebody.value = theiframe.contentWindow.document.body.innerHTML;
console.groupEnd();

textarea {width: 50%}

Iframe:
<br /><iframe id="testing"></iframe>
<hr>
Iframe's head:
<br /><textarea id="output_head"><</textarea>
<hr>
Iframe's body:
<br /><textarea id="output_body"><</textarea>

【问题讨论】：

另外，请阅读Why is document.write considered a “bad practice”?
我知道，我知道，但这只是更大项目的一小部分，无法更改。

标签： javascript dom iframe

【解决方案1】：

document.write 将 HTML 写入文档的下一位。

它遵循 HTML 的正常规则。您使用document.write 的事实并不重要。

如果您的 HTML 文档如下所示：

<style>p { ... }</style>
<div>...</div>

然后它隐式创建html 元素和head 元素，此时style 元素是有效的，并在那里插入style 元素。

然后你有一个div 元素。这不能存在于head 中，因此它隐式结束head 元素并打开body 元素。

script 元素在 head 和 body 中都允许使用，因此无论您放在哪里，它都会结束。

这正是 HTML 的工作原理。

是否可以避免这种自动行为并让程序员决定去哪里？

一些 HTML 解析器可以让您摆脱显式启动 body 然后插入 style 元素。但是，您不能使用这样的技巧将div 放入head。

<body>
<style>p { ... }</style>
<div>...</div>

您还可以使用 DOM 操作（appendChild 等）将元素插入不属于它们的位置并绕过 HTML 解析规则。

故意生成无效的 DOM 确实不是一个好主意。如果您试图提出某种需要它的 hack，您可能应该重新考虑您的整个方法。

【讨论】：

【解决方案2】：

基于another answer，document.write可以通过专门用来声明<head>和<body>中的一个或两个来控制。

例如，document.write('<style>p {font-size: 1em}<\/style>') 指向头部，但 document.write('<body><style>p {font-size: 1em}<\/style><\/body>') 指向主体。

同样，document.write('<script>var a=2;<\/script>') 指向头部，但 document.write('<body><script>var a=2;<\/script><\/body>') 指向主体。

正如该答案中提到的，它当然不适用于根本无法出现在头脑中的元素，例如 <span> 或 <div>。

查看完整演示 in JSFiddle（支持与 iframe 交互）。

var theiframe=document.getElementById('testing'), output=document.getElementById('output'), thebody=document.getElementById('output_body'), thehead=document.getElementById('output_head'), thebody=document.getElementById('output_body');
console.clear();
console.group('Testing');
theiframe.contentWindow.document.open();
theiframe.contentWindow.document.write("<head>");
theiframe.contentWindow.document.write("<script>var foo1='head';<\/script>");
theiframe.contentWindow.document.write("<\/head>");
theiframe.contentWindow.document.write("<body>");
theiframe.contentWindow.document.write("<script>var foo2='body';<\/script>");
theiframe.contentWindow.document.write("</body>");
theiframe.contentWindow.document.close();
console.log(theiframe.contentWindow.document.documentElement);
thehead.value = theiframe.contentWindow.document.head.innerHTML;
thebody.value = theiframe.contentWindow.document.body.innerHTML;
console.groupEnd();

textarea {width: 50%}

Iframe:
<br /><iframe id="testing"></iframe>
<hr>
Iframe's head:
<br /><textarea id="output_head"><</textarea>
<hr>
Iframe's body:
<br /><textarea id="output_body"><</textarea>

【讨论】：