动态引入document.write的脚本

当网站需要动态引入脚本时，而引入的脚本逻辑又是通过document.write执行时，往往会出现问题。因为动态引入的脚本是会在页面DOMContentLoaded 事件完成后触发onload事件，此时页面dom结构渲染完成了，而此时document.write的渲染会把页面内容清空之后在写入。为了防止重复渲染，浏览器会禁止document.write执行。

Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened

方法一

改变页面加载的顺序
可以使用document.open打开页面渲染，改变页面的结构后调用document.close重新渲染

  <script>// 动态引入js文件document.open();document.write(`\<script src="https://srcfile/${num}/header.js"\>\<\/script\>`)</script><!--header.js会动态插入这里--><div id="app"></div><script>document.write(`\<script src="https://srcfile/${num}/footer.js"\>\<\/script\>`)document.close();</script><!--footer.js会动态插入这里-->

开启document.open之后，document.write的内容就会紧跟着写在document后面,而不会覆盖原始内容

方式二

将脚本作为接口地址请求，获取到内容，然后通过Dom.parser将内容转为html后解析里面的内容,插入网站中
需要处理文本内容

方式三

使用iframe存放脚本

const header_src = `https://srcfile/${num}/header.js`const iframe = document.querySelector('.heade-iframe');loadScriptViaIframe = () => {iframe.onload = () => {const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;iframeDoc.open();iframeDoc.write(`\<script src="${header_src}"\>\<\/script\>`);iframeDoc.close();};}loadScriptViaIframe()document.body.insertBefore(iframe, document.body.firstChild);

适用性不强

方式四

如果脚本方能够提供可以动态引入的脚本文件最好