📜  除非显式打开,否则无法从异步加载的外部脚本写入文档 - Javascript (1)

📅  最后修改于: 2023-12-03 15:28:51.199000             🧑  作者: Mango

除非显式打开,否则无法从异步加载的外部脚本写入文档 - JavaScript

在 JavaScript 中,如果你使用异步加载的方式引入外部脚本,那么默认情况下是无法直接从脚本中写入文档的。这是因为浏览器为了安全考虑,防止从外部恶意脚本中修改页面内容,所以禁止了这种行为。

解决方案

但是,如果你确实需要在异步加载的脚本中写入文档,可以使用一些特殊的技巧来解决。下面介绍两种常见的做法:

1. 在页面中加入 script 标签并设置 defer 或 async 属性
<script src="your-script.js" defer></script>

或者

<script src="your-script.js" async></script>

deferasync 都是 script 标签的属性,用于控制脚本的执行方式。其中 defer 表示脚本在文档解析完毕后按顺序执行,但是会在 DOMContentLoaded 事件触发之前执行;async 则表示脚本加载完毕后会立即执行,而不会阻塞页面渲染。

使用 defer 或 async 属性加载脚本,可以让脚本在指定的时机执行,从而避免了直接在脚本中写入文档的问题。不过需要注意的是,由于脚本执行时机的不确定性,所以如果你依赖于某个 DOM 元素的存在或者某个事件的触发,就需要特别小心。

2. 使用 document.currentScript

另外一个常见的做法是使用 document.currentScript 属性。这个属性表示当前正在执行的脚本元素,通过它可以获取到异步加载的外部脚本元素。

var script = document.currentScript;

获取 script 元素之后,就可以通过它来修改页面内容了。不过需要注意的是,只有在异步加载的脚本中才能使用 document.currentScript,如果是同步加载的脚本就会返回 null。

总结

在 JavaScript 中,从异步加载的外部脚本中写入文档是被禁止的,但是可以通过使用 defer 或 async 属性,或者使用 document.currentScript 属性来实现。不过需要记住,任何修改页面内容的操作都需要以最小的范围为原则,避免影响其他模块的正确性。