当前位置：首页 > 行业动态 > 正文

html怎样调用js

admin
行业动态
2025-05-05
2

在HTML中通过` 标签引入JavaScript代码，或使用src 属性加载外部JS文件，

HTML调用JS的常见方法

内部脚本（直接在HTML中编写）

步骤	示例代码	说明
在`<head>`或`<body>`中添加`<script>`	`<script>alert("页面加载完成！");</script>`	直接嵌入JS代码，适合少量逻辑，维护性较差
可多个`<script>`标签并列	`<script>console.log(1);</script><script>console.log(2);</script>`	按顺序执行，需注意依赖关系

外部脚本（链接.js文件）

步骤	示例代码	说明
创建外部JS文件（如`main.js`）	`// main.js` `function showAlert(){ alert("外部脚本调用！"); }`	分离HTML与JS，便于复用和维护
在HTML中引用外部脚本	`<script src="main.js"></script>`	`src`路径需正确，可放在`<head>`或`<body>`
使用`defer/async`控制加载顺序	`<script src="main.js" defer></script>`	`defer`按顺序执行，`async`异步加载

事件驱动（通过事件触发JS）

类型	示例代码	说明
内联事件	`<button onclick="showAlert()">点击</button>`	直接在HTML标签中写事件，简单但不易维护
事件监听器	```javascript<br>`document.getElementById('btn').addEventListener('click', showAlert);````	分离事件与逻辑，推荐现代开发方式

动态加载脚本（按需加载）

步骤	示例代码	说明
创建`<script>`元素	`var script = document.createElement('script');`	动态生成脚本标签
设置`src`属性	`script.src = 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';`	加载第三方库（如Axios）
插入到文档中	`document.head.appendChild(script);`	触发浏览器加载脚本，支持异步操作

相关问题与解答

问题1：如何确保外部JS文件在HTML加载完成后执行？

解答：

html怎样调用js 第1张

将<script>标签放在<body>标签末尾，保证HTML元素已渲染。
使用defer属性：<script src="main.js" defer></script>，浏览器会按顺序执行脚本。

监听DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function() {
  // 页面加载完成后的逻辑
});

问题2：如何在不刷新页面的情况下动态加载新的JS文件？

解答：
通过创建并插入<script>标签实现，

function loadScript(url) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = () => console.log(`${url} 加载成功`);
  script.onerror = () => console.error(`${url} 加载失败`);
  document.head.appendChild(script);
}
// 调用示例
loadScript('https://example.com/newScript.js');