在前端开发中，我们通常需要动态添加脚本标签到页面中。这可以用来加载外部 JavaScript 文件或者执行一些动态创建的 JavaScript 代码。然而，在实践中，我们经常会遇到一个问题：在动态添加脚本标签时，有些 Src 属性可能包含 document.write，这会导致一些不可预期的结果。
document.write 的作用和问题
document.write 是 JavaScript 中一个用于向 HTML 文档写入内容的方法。它接受一个字符串参数，将该字符串插入到页面中调用该方法的位置处。例如，下面的代码将在页面中输出 "Hello World!"：
--------------------- ---------
然而，使用 document.write 也会带来一些问题。如果在页面加载完毕后（例如在 window.onload 回调函数中）使用 document.write 写入内容，它将覆盖整个页面的内容。此外，如果在已经存在的文档流中使用 document.write，它还会打破文档流，可能导致意外的布局问题。
动态添加脚本标签及其问题
为了避免上述问题，我们通常会将 JavaScript 代码放在外部文件中，并通过动态添加脚本标签的方式将其加载到页面中。例如，下面是一个动态添加脚本标签的例子：
--- ------ - --------------------------------- ---------- - ------------- ----------------------------------
以上代码将创建一个新的 script 元素，然后将其添加到页面的 body 元素中。这样，浏览器就会下载 example.js 文件并执行其中的 JavaScript 代码。
然而，如果 example.js 文件中包含 document.write，它会改变当前文档流并覆盖整个页面的内容，导致一些不可预期的结果。例如，下面的代码将在页面加载完毕后覆盖整个页面的内容：
-------------------- -- - --------
虽然我们很难避免所有可能出现 document.write 的情况，但我们可以采取一些措施来减少其影响。
解决方案
1. 使用 defer 或 async 属性
HTML5 引入了 defer 和 async 属性，用于指定脚本的加载方式。defer 属性指示浏览器在文档解析完成后再执行脚本，而 async 属性则指示浏览器在下载完成后立即执行脚本。这两种属性都可以帮助我们避免 document.write 带来的问题。
--- ------ - --------------------------------- ---------- - ------------- ------------ - ----- -- -- ------------ - ----- ----------------------------------
使用 defer 或 async 属性可以确保脚本在页面加载完成后才执行，从而避免了 document.write 对页面的影响。然而，这种方法并不能完全解决问题，因为它依赖于浏览器的实现方式。
2. 使用 DOM 操作替代 document.write
我们可以使用 DOM 操作（例如 createElement 和 appendChild）来替代 document.write 来动态创建 HTML 元素。这样可以避免 document.write 带来的覆盖整个页面的问题，并且更加灵活和可控。例如，下面的代码将在页面中添加一个新的 div 元素：
--- --- - ------------------------------ ------------- - ----- -- - ------- -------------------------------
通过使用 DOM 操作，我们可以更好地控制 HTML 元素的创建和布局，而不会出现意外的结果。
示例代码
下面是一个示例代码，演示了如何动态添加带有 defer 属性的脚本标签，并使用 DOM 操作
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11821