📌  相关文章
📜  加载 js 文件 - Javascript (1)

📅  最后修改于: 2023-12-03 14:50:24.329000             🧑  作者: Mango

加载 js 文件 - Javascript

在 JavaScript 中，可以使用不同的方法来加载外部的 JavaScript 文件。这些文件可以包含函数、对象、变量以及其他 JavaScript 代码。

以下是几种常用的加载 JavaScript 文件的方法：

直接在 HTML 文件中引入

最简单的方法是在 HTML 文件中使用 <script> 标签直接引入外部的 JavaScript 文件。例如：

<script src="file.js"></script>

在浏览器解析 HTML 文档时，会自动加载并执行 file.js 文件中的 JavaScript 代码。

动态创建 <script> 标签

通过 JavaScript 动态地创建 <script> 标签，然后将其添加到 HTML 文档中，也可以实现加载并执行外部 JavaScript 文件。

var script = document.createElement('script');
script.src = 'file.js';
document.body.appendChild(script);

上述代码创建了一个 <script> 元素，并设置了其 src 属性为 file.js。然后，将该元素添加到 <body> 元素中。这样，浏览器会加载并执行 file.js 文件中的 JavaScript 代码。

使用 AJAX 加载 JavaScript 文件

使用 AJAX 技术也可以加载外部的 JavaScript 文件。通过创建一个 XMLHttpRequest 对象，然后异步地请求外部文件，并在请求成功后将其内容插入到HTML文档中。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.js', true);
xhr.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        var script = document.createElement('script');
        script.innerHTML = this.responseText;
        document.body.appendChild(script);
    }
};
xhr.send();

上述代码使用了 XMLHttpRequest 对象来发送 GET 请求，并监听了其状态变化。当状态变为 4 (请求已完成) 且响应状态为 200 (成功) 时，将响应内容添加到一个动态创建的 <script> 元素中，并将该元素添加到 <body> 元素中。

以上是几种常用的加载外部 JavaScript 文件的方法，根据实际需求选择适合的方法来加载和使用外部的 JavaScript 代码。