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

html5链接js

html5链接js 第1张

HTML5通过标签引入JS，支持内联与外链脚本，利用事件监听及DOM操作实现交互，兼容

HTML5链接JavaScript的常见方式

通过<script>标签引入外部JS文件

方法说明 示例代码 作用
使用src属性指定外部JS文件路径 <script src="main.js"></script> 加载并执行外部脚本
HTML5新增async属性 <script src="main.js" async></script> 异步加载脚本，不阻塞后续渲染
HTML5新增defer属性 <script src="main.js" defer></script> 延迟执行脚本，等待DOM解析完成后执行

内部脚本（直接在<script>标签中编写JS）

方法说明 示例代码 特点
在<head>或<body>中定义 <script>alert("Hello World");</script> 脚本直接嵌入HTML，无外部依赖
可结合type属性（默认为text/javascript） <script type="application/json" id="data">{"key":"value"}</script> 用于存储非执行数据（如JSON）

内联事件处理程序中的JS

方法说明 示例代码 注意点
通过HTML事件属性调用JS函数 <button onclick="alert('Clicked')">点击我</button> 仅适用于简单逻辑，复杂场景建议分离JS
支持直接内联代码 <a href="#" onmouseover="this.style.color='red'">悬停变色</a> 内联代码可读性差，维护困难

动态创建<script>标签（HTML5 API）

方法说明 示例代码 应用场景
使用document.createElement插入脚本 “`js

const script = document.createElement(‘script’);
script.src = ‘dynamic.js’;
document.head.appendChild(script); 

| 设置`onload`事件监听脚本加载完成 | `script.onload = function() { console.log('Script loaded'); };` | 确保脚本执行后的操作安全 |  
---
 相关问题与解答  
问题1：`async`和`defer`的区别是什么？  
解答：  
  `async`：脚本异步加载并立即执行，不保证执行顺序，可能打断HTML解析。  
  `defer`：脚本延迟到DOM完全解析后执行，且按顺序执行多个`defer`脚本，更适合依赖DOM的操作。  
问题2：如何在HTML中嵌入JSON数据并通过JS读取？  
解答：  
  1. 使用`<script>`标签并设置`type`为非`text/javascript`（如`application/json`）：  
     ```html  
     <script type="application/json" id="config">  
     { "theme": "dark", "lang": "zh" }  
     </script>
  1. 通过JS获取并解析： 
    const config = JSON.parse(document.getElementById('config').textContent);  
console.log(config.theme); // 输出 "dark"
javascript链接
0

相关文章