如何使document.write()不追加文本？前端技术实现问询

这个问题我之前也碰到过，本质是因为document.write()的行为在文档加载完成前后有差异：

• 第一次打开新窗口时，文档还处于未完成加载的状态，此时调用document.write()会直接写入内容并构建文档；
• 但当窗口已经存在且文档加载完成后，再调用document.write()就会默认在现有文档的末尾追加内容，因为此时文档流已经关闭了。

下面给你两种简单有效的解决方法：

方法1：先打开文档流再写入（兼容传统场景） #

在写入新内容前，先调用document.open()重新打开文档流，写完后调用document.close()关闭流，这样就能覆盖原有内容。修改后的代码如下：

<script>
function makeWindow() {
  var result = window.open("", "Result", "width=600,height=600");
  // 先打开文档流，再写入，最后关闭
  result.document.open();
  result.document.write(document.getElementById("txt").value);
  result.document.close();
}
</script>
<textarea id="txt"></textarea>
<br>
<button onClick="makeWindow();">Click</button>

方法2：直接修改DOM内容（更推荐） #

相比操作文档流，直接修改目标窗口的innerHTML会更直观，也不需要处理文档流的打开/关闭逻辑，代码更简洁：

<script>
function makeWindow() {
  var result = window.open("", "Result", "width=600,height=600");
  // 直接替换body的内容
  result.document.body.innerHTML = document.getElementById("txt").value;
}
</script>
<textarea id="txt"></textarea>
<br>
<button onClick="makeWindow();">Click</button>

两种方法都能实现点击按钮时，新窗口的内容被完全覆盖而不是追加，你可以根据自己的习惯选择～

内容的提问来源于stack exchange，提问作者CookiePanda