如何确保在正文渲染完成之前执行 document.write 操作？答案

【问题标题】：How to make sure document.write action takes place before body rendering finishes?如何确保在正文渲染完成之前执行 document.write 操作？
【发布时间】：2013-10-16 19:01:38
【问题描述】：

我有一段 JavaScript 代码将在呈现 <body> 时异步调用。我还有一个 JavaScript 文件，它将使用这段代码。这段代码和加载文件的脚本是在外部系统中编写的。无法预测何时将这段代码插入到页面中。我无法更改 JS 文件中的代码。

现在，JS 文件包含创建图像的 document.write 方法。但是，不推荐使用这种方法，因为无法预测写入操作何时发生。例如，如果它在 body 渲染完成和 DOM 加载后运行，则页面内容将被完全重写。我想确保不会发生上述最坏的情况。如何做到这一点？

【问题讨论】：

如果您的代码是异步运行的，那么您不能保证它会在 DOM 加载之前执行。
同意克里斯。你不能保证。假设您无法更改 document.write，您可能会将脚本加载到另一个文档中，例如隐藏框架，然后将隐藏文档的书面文本附加到您的可见文档中。这将是一个（肮脏的）工作。
@mrhobo，或者-您可以简单地覆盖document.write，如下所述...

标签： javascript

【解决方案1】：

不要以为你可以 100% 确定。但是你可以使用document.body.innerHTML 而不是document.write

document.write('<img src="1.gif">');

很可能会重置 DOM，尤其是放在 <body> 之后的某处

document.body.innerHTML+='<img src="1.gif">';

不会，甚至不会放在window.onload 函数中。

现在，你说你不能更改JS文件中的代码，但你可以更改document.write：

document.write = function() {
    document.body.innerHTML+=arguments[0];
}

如果 JS 像这样调用document.write

document.write('<img src="1.gif">');

那么现在实际调用的是document.body.innerHTML+=arguments[0];，将<img> 附加到正文。

Viola，你已经解决了document.write 的问题...

【讨论】：

但是，图片的src是通过附加一些参数动态创建的。
这张图片的实际目的是传递一些与在线购买相关的值。
另外，如果我使用这个，页面中的所有其他 document.write 方法也会被替换。不是吗？
@RaheebM，一定要看代码，否则纯属猜测——以上只是一个例子。使用 arguments[]，您可以传递任意数量的参数。 document.write 只接受一个参数 -> developer.mozilla.org/en-US/docs/Web/API/document.write - 一段 html / 标记
@RaheebM，是的-您应该将 ducument.write 替换放在中，然后对 document.write 的所有调用都将通过该替换。