如何在 document.write 中包含脚本？答案

【问题标题】：How can I include a script with document.write?如何在 document.write 中包含脚本？
【发布时间】：2020-07-20 00:04:33
【问题描述】：

我们需要向我们的 Web 应用程序添加一个脚本。它基本上添加了一个公司菜单。

所以我们收到了一个脚本，可以包含在我们的 Web 应用程序主体中：

<!-- BEGIN NAVIGATION -->
<script type="text/javascript" src="https://intranet.local/?getCorporateJsMenu"></script>
<!-- END NAVIGATION -->

而https://intranet.local/?getCorporateJsMenu的内容基本上是这样的：

document.write('<script type="text/javascript" src="..."></script>');
//....
document.write('<div>');
document.write('<ul>');
//...
document.write('<li><a href="...">...</a></li>');
//...
document.write('</ul>');
document.write('</div>');

在将<script... 直接放入 HTML 正文后，我们遇到了严重的页面加载性能问题。

所以我们的想法是使用 JavaScript 添加菜单，此时所有内容都已加载如下内容：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://intranet.local/?getCorporateJsMenu';
var domparent = jQuery('#header').get();
domparent[0].appendChild(script);

通过Firebug，我们看到，脚本元素已添加到 HTML 内容中，并且脚本已从网络加载，但不知何故，加载脚本的 document.write 没有被执行。为什么？

https://intranet.local/?getCorporateJsMenu的内容来自第三方，我们无法修改。

【问题讨论】：

doc.write 将提高性能。您可以重新定义该方法并将调用收集在一个数组中以实现穷人的输出缓冲。然后像 .innerHTML=arrWrites.join(" ");
@dandavis 其实document.write() 是动态创建内容的最快方式...
@Teemu：我不知道如何创建内容，或者你如何定义“最快”，但是 doc.write 对页面加载性能有充分的记录……
@JMW 在您更新之后，看来您唯一的机会是联系供应商，并要求他们修复脚本，或更改供应商...
我看不到任何覆盖第三方代码的方法，因为您无法访问跨域文档。而且在这种特殊情况下，错误是在解析时引起的，即使是您自己的代码，也无法修复它，而无需更正实际文件中的代码。

标签： javascript document.write

【解决方案1】：

发生这种情况是因为脚本执行在第一个找到的文字 </script> 标记处停止，无论它是否包含在括号中。你需要混淆结束script标签，例如：

document.write('<script type="text/javascript" src="..."><\/script>');

但是，您似乎也使用 jQuery。为什么不使用 jQuery 方法来加载脚本并将内容添加到页面而不是 document.write()？

【讨论】：

为什么有限制？什么目的？如果人们最终可以像这样解决问题，它对谁有帮助？
@SandeepanNath 实际上这不是限制，而是由于解释器的行为。当解释器遇到结束脚本标签时，它会被解释为 - 以及 - 作为结束脚本标签。这就是为什么在运行时写入的结束标记必须与实际结束标记看起来不同的原因。
感谢您的实际回答。

【解决方案2】：

以下是劫持 document.write() 以将 21 世纪的加载性能带入遗留脚本的示例：

<script>
    var writes = [];
    document.write = [].push.bind(writes);
</script>

<div id=targ></div>

<script type="text/javascript" src="https://intranet.local/?getCorporateJsMenu"></script>
<script>
    document.getElementById("targ").innerHTML = writes.join(" ");
</script>

我已经使用这些模式来支持 SPA 网站上的广告，以及缓存嵌入，并在一种情况下在注入之前修改内容的样式。

【讨论】：

@Teemu：好的代码不使用 document.write，所以除了 document.write() 和使用它的脚本之外，我看不出这会如何影响任何东西......
我的意思是：d.w('blaah'); var foo = 0; d.w('some ' + foo + ' is coming');。你的 sn-p 中的 non-document.write-code 会发生什么？
@Teemu：它会像任何其他普通脚本一样执行，当你使用innerHTML 时，concat 的东西就会在那里。我真的不明白你在说什么......
很好的解决方案 :-) 但遗憾的是，Teemu 是对的。建议的解决方案不起作用，因为 doc.writes 之间有一些 javascript，它将鼠标悬停事件处理程序附加到元素并且找不到 html :-(
但是，我会接受你的回答，因为它使 document.writes 工作，即使它不是我们问题的实际解决方案:-)

【解决方案3】：

试试这个：

document.write('<scr' + 'ipt type="text/javascript" src="..."></scr' + 'ipt>');

【讨论】：

这是我为确保 jQuery 工作而做的检查。在我第一次看到实际网站使用它的时候，我觉得它真的很有趣。