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

html5调用js

HTML5通过标签或事件属性直接调用JavaScript函数实现

基础调用方法

调用方式 代码示例 说明
内联脚本 <script>alert("Hello HTML5!")</script> 直接在HTML中嵌入JS代码，通常放在</body>前
外部脚本 <script src="main.js"></script> 通过src引入外部JS文件，需确保路径正确
事件属性 <button onclick="alert('Clicked')">点我</button> 在HTML元素上直接绑定事件处理函数

事件处理

事件类型 代码示例 说明
内联事件 <img src="image.jpg" onload="console.log('图片加载完成')"> 元素加载时触发事件
事件监听 <script> document.getElementById('myBtn').addEventListener('click', function() { alert('按钮被点击'); });</script> | 通过addEventListener绑定事件，支持多个回调

动态加载脚本

方法 代码示例 说明
创建<script> <script> var script = document.createElement('script'); script.src = 'dynamic.js'; document.head.appendChild(script);</script> 动态插入脚本，可控制加载顺序
异步加载 <script> script.async = true; script.onload = function() { console.log('脚本加载完成'); };</script> | 设置async属性实现异步加载

DOM操作与JS交互

操作类型 代码示例 说明
获取元素 const elem = document.querySelector('.my-class'); 通过选择器获取DOM节点
document.getElementById('text').innerText = '新内容'; 直接修改元素文本或HTML
操作属性 elem.style.color = 'red'; 修改元素CSS样式或属性

错误处理

场景 代码示例 说明
语法错误 <script> try { undefinedFunction(); } catch (e) { console.error(e); } 使用try-catch捕获运行时错误
脚本加载失败 <script src="error.js"></script><script> document.querySelector('script').onerror = function() { alert('脚本加载失败'); };</script> | 监听onerror事件处理加载错误

高级用法（HTML5特性）

特性 代码示例 说明
ES6模块导入 <script type="module"> import { func } from './module.js'; func();</script> | 使用type="module"加载模块化脚本
Web Storage <script> localStorage.setItem('key', 'value'); const val = localStorage.getItem('key');</script> 通过API操作本地存储数据

相关问题与解答

问题1：如何确保外部脚本加载完成后再执行代码？

解答：

  1. 将依赖脚本的代码放在外部脚本<script>标签之后。
  2. 使用defer属性让脚本异步加载并等DOM解析完成后执行。
  3. 通过事件监听（如script.onload）检测脚本加载状态。
    示例： 

    <script src="main.js" defer></script>
<script>
console.log('主脚本已加载'); // 确保在main.js之后执行
</script>

问题2：如何动态加载的脚本支持模块化（ES6）？

解答：

  1. 动态创建的<script>标签需设置type="module"。
  2. 使用importMap或URL路径指定模块依赖。
    示例： 

    const script = document.createElement('script');
script.type = 'module';
script.src = 'dynamic-module.js';
document.head.appendChild(script);
API调用事件处理
0

相关文章