按下按钮后加载脚本js - Javascript(1)

📌 相关文章

📜 按下按钮后加载脚本js - Javascript(1)

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

按下按钮后加载脚本js - Javascript

在Web开发中，常常需要按下按钮后加载js脚本，本文将介绍如何实现此功能。

步骤

首先，在HTML文档中声明一个按钮对象，可以使用<button>或<input>标签。
```
<button id="myButton">Load Script</button>
```
接着，在HTML中引用需要加载的js脚本。
```
<script src="myscript.js"></script>
```
在JavaScript代码中定义按下按钮后执行的操作，使用addEventListener()方法监听按钮的click事件。
```
document.getElementById("myButton").addEventListener("click", function() {
    // 加载脚本
    var script = document.createElement('script');
    script.src = 'myscript.js';
    document.head.appendChild(script);
});
```
上述代码创建了一个script元素，将src属性设置为需要加载的脚本路径，然后将脚本添加到head标签中。

示例

完整的示例代码如下所示。

<!DOCTYPE html>
<html>
<head>
    <title>Load Script on Button Click</title>
</head>
<body>
    <button id="myButton">Load Script</button>
    <script src="myscript.js"></script>
    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            // 加载脚本
            var script = document.createElement('script');
            script.src = 'myscript.js';
            document.head.appendChild(script);
        });
    </script>
</body>
</html>

结论

在以上示例中，我们演示了如何在点击按钮后动态加载js脚本。这种方法使用createElement()方法动态创建script元素，设置src属性后添加到head标签中实现。这种方法比直接在HTML中引入js脚本更加灵活，可以根据实际需求动态添加脚本，提高Web开发的效率和灵活性。