首页html动态引入js文件

html动态引入js文件

时间: 2023-08-29 09:08:20 浏览: 102

在 HTML 页面中动态引入 JavaScript 文件，可以使用 JavaScript 的 DOM 操作。以下是一个例子： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态引入 JavaScript 文件</title> </head> <body> <button onclick="loadScript()">点击加载 JavaScript 文件</button> <script> function loadScript() { var script = document.createElement('script'); script.src = 'example.js'; // 将 example.js 替换成你要引入的 JavaScript 文件的路径 document.head.appendChild(script); } </script> </body> </html> ``` 在上面的例子中，我们创建了一个按钮，并为该按钮绑定了一个 `onclick` 事件，当用户点击该按钮时，就会调用 `loadScript` 函数。`loadScript` 函数中，我们创建了一个 `script` 元素，并将其 `src` 属性设置为要引入的 JavaScript 文件的路径。最后，我们将该 `script` 元素添加到 HTML 页面的头部（`head`）中，以便加载 JavaScript 文件。需要注意的是，当我们在 JavaScript 文件中定义了函数或变量时，这些函数或变量只能在该文件被加载后才能被使用。如果我们希望在 JavaScript 文件被加载前使用其中的函数或变量，可以使用回调函数或 `defer` 属性来实现。

阅读全文