jamiechoo

 

动态加载.js文件有哪些方法

动态加载 JavaScript 文件是指在页面已经渲染完成后，通过 JavaScript 代码来动态地向页面中添加 JavaScript 文件，以便动态地引入和执行这些文件中的代码。

以下是动态加载 JavaScript 文件的几种方法：

1. document.createElement + document.head.appendChild

使用 JavaScript 创建一个 script 元素节点，设置其 src 属性为要加载的 JavaScript 文件的 URL，然后将这个节点添加到页面的 <head> 元素中。

 
js
复制代码
const script = document.createElement('script');
script.src = 'path/to/script.js';
document.head.appendChild(script);

2. document.write

使用 document.write 可以动态地将 JavaScript 代码写入 HTML 文档中，也可以用来加载 JavaScript 文件。

 
js
复制代码
document.write('<script src="path/to/script.js"></script>');

3. XMLHttpRequest + eval

通过 XMLHttpRequest 对象异步地加载 JavaScript 文件，然后通过 eval 函数执行其中的代码。

 
js
复制代码
const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/script.js', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    eval(xhr.responseText);
  }
};
xhr.send();

4. 动态创建 script 元素并设置 async 或 defer 属性

在 HTML5 中，script 元素新增了 async 和 defer 属性，它们可以让浏览器异步地加载和执行 JavaScript 文件。当使用这两个属性时，浏览器会在下载完页面后立即开始下载 JavaScript 文件，并在下载完成后立即执行其中的代码，而不会阻塞页面的渲染过程。

 
js
复制代码
const script = document.createElement('script');
script.src = 'path/to/script.js';
script.async = true;
document.head.appendChild(script);
 
js
复制代码
const script = document.createElement('script');
script.src = 'path/to/script.js';
script.defer = true;
document.head.appendChild(script);

需要注意的是，使用 eval 函数可能存在安全隐患，因此建议使用第一种或第四种方法动态加载 JavaScript 文件。

posted on 2024-01-16 19:48  jamiechoo  阅读(750)  评论(0)    收藏  举报

导航