HTML如何调用外部脚本_JavaScript引入方式解析【教程】

必须通过外部引入方式加载独立.js文件：一、用script标签src属性引入；二、动态创建script元素插入DOM；三、用import()函数动态导入ES模块；四、JSONP跨域加载；五、module preload预加载。

如果您在HTML页面中需要使用JavaScript功能，但将脚本代码直接写入HTML文件导致结构混乱或复用困难，则必须通过外部引入方式加载独立的.js文件。以下是HTML调用外部JavaScript脚本的具体方法：

一、使用script标签的src属性引入

这是最常用且标准的外部脚本引入方式，通过<script></script>标签的src属性指定外部.js文件路径，浏览器会自动下载并执行该文件中的JavaScript代码。

1、在HTML文件的或标签内插入<script></script>标签。

2、为<script></script>标签设置src属性，值为外部JS文件的相对路径或绝对URL，例如src="js/main.js"。

立即学习“Java免费学习笔记（深入）”；

3、确保<script></script>标签不包含内部脚本内容，即开始与结束标签之间无任何文本或代码。

4、若需控制执行时机，可添加defer或async属性：defer适用于依赖DOM结构的脚本，确保在HTML解析完成后按顺序执行；async适用于独立脚本，下载完成即执行，不保证顺序。

二、动态创建script元素插入DOM

该方式适用于运行时按需加载脚本，避免初始页面加载时阻塞渲染，常用于条件加载、模块化加载或第三方SDK懒加载场景。

1、使用document.createElement('script')创建新的<script></script>元素。

2、为该元素设置src属性，指向目标JS文件路径。

3、可选：设置async属性为true以启用异步加载。

4、调用document.head.appendChild()或document.body.appendChild()将脚本元素插入文档。

5、如需监听加载完成，可绑定onload事件处理函数，注意：此时脚本已执行完毕，可在回调中调用其暴露的全局函数或变量。

三、使用import()函数动态导入ES模块

当外部脚本以ES6模块（type="module"）形式编写时，可通过import()函数实现动态、按需、异步的模块加载，支持返回Promise以便链式处理。

1、确保外部JS文件使用export语法导出所需功能，例如export function init() { ... }。

标签： javascript es6 java html js json 浏览器 app 回调函数 懒加载 ai html文件