当cdn加载jquery失败导致“jquery is not defined”错误时,应先用network面板或curl确认故障原因,再通过window.jquery检测+本地文件回退(document.write或动态创建script)、切换更稳定cdn(bootcdn/jsdelivr)或实施双cdn+本地三级fallback方案保障页面交互功能。

当网页中通过CDN加载的 jQuery-3.5.1.min.js 因网络封锁、节点宕机或DNS污染而无法获取时,浏览器控制台会报出 Uncaught ReferenceError: jQuery is not defined,所有依赖 jQuery 的脚本立即中断执行,轮播图不转、表单验证失效、点击事件无响应——页面核心交互功能直接瘫痪。
确认CDN是否真的挂了
打开浏览器开发者工具(F12)→ 切换到 Network 标签页 → 刷新页面 → 在筛选栏输入 jquery → 找到对应请求,查看其状态码和时间:若显示 404、0ms (failed) 或状态为 pending 超过3秒,基本可判定加载失败。
别急着改代码,先用 curl 测试终端直连:curl -I https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js。如果返回 HTTP/2 200 但浏览器打不开,问题大概率出在本地 DNS 或浏览器扩展拦截上。
立即生效的本地回退方案
方法一:用 window.jQuery 检测 + document.write 注入(兼容 IE8+)
在引入 CDN 的 <script></script> 标签后,紧接一行检测脚本:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-3.5.1.min.js"></script>')
这行代码会在 jQuery 未定义时,向 HTML 文档流中写入新的 script 标签。注意路径 js/jquery-3.5.1.min.js 必须与你本地存放文件的实际路径完全一致,否则将 404。
方法二:更安全的动态创建 script 元素(推荐用于现代项目)
① 先确保本地 jQuery 文件已放在项目 js/ 目录下,文件名严格为 jquery-3.5.1.min.js;
② 在页面 底部或 开头插入以下代码:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script></script>if (typeof jQuery === 'undefined') { var script = document.createElement('script'); script.src = 'js/jquery-3.5.1.min.js'; script.onload = function() { console.log('jQuery 已从本地加载'); }; document.head.appendChild(script);}
这个方法不会阻塞文档解析,且支持 onload 回调,比 document.write 更可控。但注意:【script 必须 append 到 head,不能 append 到 body,否则在某些老版 Safari 中可能触发同步加载异常】。
换一个更稳的 CDN 地址
国内访问 Google CDN 或 cdnjs 常因节点调度或跨境链路不稳定而超时,优先切换至 BootCDN(字节跳动维护)或 jsDelivr:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
或
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
jsDelivr 支持 npm 版本精确匹配,URL 中的 @3.5.1 不会自动升级到 3.6.x,避免意外兼容性断裂。
终极保险:双 CDN + 本地三级 fallback
把三重保障串成一条加载链,任一环节失败即降级到下一环:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script></script>if (!window.jQuery) { document.write('<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>');}
<script></script>if (!window.jQuery) { var s = document.createElement('script'); s.src = 'js/jquery-3.5.1.min.js'; document.head.appendChild(s);}
这段代码执行顺序不可调换:第一层用 document.write 快速切入第二 CDN;第二层必须用动态创建 script,因为此时文档已开始解析,document.write 会清空整个页面。











