JavaScript/jQuery页面跳转后CSS无法加载问题解决

首先修正跳转代码的语法错误 #

你提供的跳转代码存在两处基础语法问题，先修正后再做后续排查：

• 浏览器全局对象为window，不存在windows这个全局对象，属于拼写错误
• window.location.href是属性而非函数，不能通过括号传参的方式调用

修正后的标准跳转写法：

// 相对路径跳转写法
window.location.href = "../index.html";

// 更推荐的根路径写法，不受当前页面层级影响，不会跳错目录
window.location.href = "/index.html";

CSS加载失败核心原因与修复方案 #

HTML能正常加载说明跳转指向的目标文件路径正确，CSS加载失败和跳转JS逻辑无关，本质是目标HTML中写的CSS引用路径，和跳转后浏览器地址栏的实际路径层级不匹配，按以下步骤排查修复即可：

• 第一步先确认跳转后的实际地址：执行跳转后看浏览器地址栏的URL，确认你跳转到的index.html是不是你预期目录下的文件，很多人写相对路径../index.html时会少算一层目录，实际跳到了非预期的上层目录，对应目录下自然找不到你引用的CSS文件。
• 打开F12开发者工具，切换到「网络」面板筛选CSS资源，看加载失败的CSS的实际请求路径，和你本地/服务器上CSS文件的真实存放路径做对比，一眼就能定位路径解析偏差。
• 所有静态资源（CSS、JS、图片等）引用优先用根相对路径，也就是路径开头加/，比如你的CSS存放在站点根目录的css文件夹下，引用就写：

<link rel="stylesheet" href="/css/common.css">

这种写法不管当前HTML在站点的哪个目录层级，浏览器都会从站点根目录开始查找资源，完全不会因为页面跳转的层级变化出现相对路径解析错误。

• 尽量避免在资源引用时写多层级相对路径（比如../../css/common.css），这类写法强依赖当前HTML的所在目录，只要入口页面层级变化就会出现资源404。
• 如果你是直接双击HTML文件用file://协议打开页面调试，浏览器会有本地路径访问限制，也可能导致CSS加载失败，搭建一个本地静态服务访问项目即可解决，不要直接用文件协议打开开发中的页面。

内容的提问来源于stack exchange，提问作者Swampy