动态引入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);

适用性不强

方式四

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