0

0

HTML怎样引入外部JavaScript文件_HTML引入外部JavaScript文件脚本【脚本】

看不見的法師

看不見的法師

发布时间:2026-03-09 18:21:12

|

239人浏览过

|

来源于php中文网

原创

外部js未加载主因是src路径错误,需检查相对/绝对路径、script位置(推荐放前)、type属性(模块须写type="module")、本地cors限制(需http服务而非file://协议)。

html怎样引入外部javascript文件_html引入外部javascript文件脚本【脚本】

script 标签的 src 属性必须写对路径

外部 JS 文件没加载,十有八九是 src 路径错了。浏览器不会报错,但控制台里 net::ERR_ABORTED 或 404 就说明文件根本没发请求过去。

  • 相对路径以当前 HTML 文件位置为基准,不是以 JS 文件位置算
  • src="js/main.js" 表示 HTML 同级目录下有个 js/ 文件夹,里面放 main.js
  • src="./js/main.js" 更明确,避免某些服务器对省略 ./ 的解析差异
  • 绝对路径从域名根目录开始,比如 src="/assets/script.js",注意开头的 /

script 标签放哪儿影响执行时机

JS 文件加载后立即执行,顺序和位置直接决定变量能不能用、DOM 元素存不存在。

  • 放在 里,脚本执行时 还没解析,document.getElementById 拿不到元素
  • defer 属性:<script src="app.js" defer></script>,脚本会等 HTML 解析完再执行,且保持顺序
  • async 属性:下载不阻塞 HTML,但执行时机不确定,适合无依赖的统计脚本
  • 最稳妥的做法是把 <script></script> 放在 前面,确保 DOM 已就绪

type 属性现在可以省,但 module 模式必须显式声明

老项目可能还留着 type="text/javascript",其实现代浏览器默认就是 JS,写了反而多余;但用 ES Module 就必须写对。

wisecut
wisecut

一款在线视频编辑软件,使用AI和语音识别为你编辑视频

下载
  • 普通脚本:<script src="utils.js"></script>,不用写 type
  • ES Module:<script type="module" src="main.mjs"></script>,否则 import 语法会直接报错 Unexpected token 'export'
  • type="module" 自动启用 defer 行为,不需要额外加
  • 模块脚本的 import 路径必须带扩展名(如 .js)或协议(如 https://),不能写 import {foo} from 'lib'

CORS 问题常出现在本地双击打开 HTML 时

file:// 协议打开 HTML,浏览器会禁止加载外部 JS(哪怕只是同目录下的 script.js),报错 Cross origin requests are only supported for protocol schemes

立即学习Java免费学习笔记(深入)”;

  • 这不是代码写错了,是浏览器安全限制,本地开发必须走 HTTP 服务
  • 用 VS Code 的 Live Server 插件、npx serve、或者 Python 的 python3 -m http.server 都行
  • 线上部署不存在这问题,只要服务器返回正确的 Content-Type: application/javascript 就能正常加载
实际写的时候,路径、位置、模块模式、运行环境这四点串起来一查,95% 的“JS 没生效”问题就定位清楚了。最容易被忽略的是本地双击打开 HTML 时的 CORS 限制——它不报红错,只在控制台静默失败。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

6582

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

841

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

1090

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

1987

2024.03.01

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

556

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

739

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

6118

2023.08.17

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

59

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号