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

html引进js

admin
行业动态
2025-05-02
4598

HTML引入JS可通过标签实现，分三种方式：1.行内嵌入JS代码；2.引用外部.js文件（src属性）；3.异步/延迟加载（async/

HTML引入JavaScript的常见方式

直接在HTML中嵌入JavaScript代码

通过<script>标签直接在HTML文件中编写JavaScript代码,适用于少量逻辑或快速测试。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">内联JS示例</title>
  <script>
    // 直接在HTML中编写JS代码
    document.addEventListener('DOMContentLoaded', function() {
      alert('页面加载完成！');
    });
  </script>
</head>
<body>
  <h1>内联JS演示</h1>
</body>
</html>

引入外部JavaScript文件

将JavaScript代码保存为独立文件（如main.js），通过<script>标签的src属性引入,适合代码复用和维护。

html引进js 第1张

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">外部JS示例</title>
  <script src="main.js"></script> <!-引入外部JS文件 -->
</head>
<body>
  <h1>外部JS演示</h1>
</body>
</html>

使用`defer`或`async`属性优化加载

defer：延迟执行，确保脚本在HTML解析完成后执行（按顺序）。
async：异步执行，脚本立即下载并尽快执行（不保证顺序）。

属性	执行时机	是否阻塞HTML解析	是否并行下载
无	立即执行（可能阻塞HTML解析）	是	否
`defer`	HTML解析完成后按顺序执行	否	是
`async`	下载后立即执行（不保证顺序）	否	是

示例：

<script src="main.js" defer></script> <!-延迟执行 -->
<script src="analytics.js" async></script> <!-异步执行 -->

常见问题与解答

问题1：如何判断外部JS文件是否成功加载？

解答：
可以通过<script>标签的onload事件监听加载状态，或使用window.onerror捕获错误。

const script = document.createElement('script');
script.src = 'main.js';
script.onload = () => console.log('JS加载成功');
script.onerror = () => console.error('JS加载失败');
document.head.appendChild(script);