location.href赋值最直接安全;assign推入历史栈,replace替换当前记录;仅href可写,其他属性只读;跳转前须校验URL合法性防XSS。

页面跳转用 location.href 最直接,但别乱改 location 其他属性
JavaScript 实现页面跳转,最常用也最安全的方式就是赋值 location.href。它会立即触发导航,且兼容所有浏览器,包括旧版 IE。
不要试图通过拼接字符串手动修改 location.pathname 或 location.search 后再赋回去——这容易出错,也不保证行为一致。location 是只读对象(大部分属性),但 href、assign、replace、reload 是可写的或可调用的。
location.assign() 和 location.replace() 有什么区别?
两者都用于跳转,关键差异在浏览器历史记录:
-
location.assign("https://example.com"):把新地址推入历史栈,用户点「返回」能回到当前页 -
location.replace("https://example.com"):用新地址替换当前历史记录项,无法返回上一页
常见误用场景:登录后跳转首页,如果用 assign,用户按返回键又回到登录页,可能触发重复提交;此时应优先选 replace。
location 对象的可用属性有哪些?哪些真能读,哪些改了也没用?
location 的属性反映当前 URL 的结构,全部可读,但只有 href 赋值和 assign/replace 调用才真正触发跳转。其他属性如 protocol、host、pathname 等,仅用于读取或构造 URL 字符串,直接赋值无效(现代浏览器会静默忽略,不报错)。
立即学习“Java免费学习笔记(深入)”;
典型可读属性包括:
-
location.href:完整 URL 字符串(可写) -
location.protocol:如"https:"(末尾带冒号) -
location.host:域名+端口,如"example.com:8080" -
location.hostname:仅域名,如"example.com" -
location.port:端口号,HTTP 默认是空字符串,HTTPS 也是空字符串(除非显式指定) -
location.pathname:路径部分,如"/user/profile" -
location.search:查询参数,如"?id=123&name=test"(开头带?) -
location.hash:锚点,如"#section-2"(开头带#)
注意:search 和 hash 的值包含前导符号,解析时需手动去除;port 在使用默认端口(80/443)时为空字符串,不能依赖它做端口判断。
跳转前要不要检查 URL 合法性?怎么避免空跳或 XSS?
直接用用户输入或后端传来的 URL 跳转非常危险,尤其当 URL 来自 location.search 或接口响应时。常见风险:
- 空字符串或
"javascript:alert(1)"导致执行脚本 -
"//evil.com"触发协议相对跳转,可能绕过 HTTPS 限制 - 未过滤的
data:或vbscript:协议(IE)
实操建议:
- 跳转前用
URL构造函数校验:try { const url = new URL(target); if (url.protocol === "http:" || url.protocol === "https:") { location.href = url.toString(); } } catch (e) { console.warn("Invalid redirect URL"); } - 更保守的做法:只允许跳转到同源路径,用
location.origin + path拼接,避免外部 URL - 永远不要用
eval、setTimeout字符串形式、或innerHTML渲染跳转链接
协议相对 URL(如 //google.com)会被解释为当前协议下的地址,看似安全,但若当前页是 file:// 或被中间人篡改过协议,仍可能失控——所以明确限定 http: / https: 更稳妥。











