在HTML5前端开发中，location.href是最基础也最常用的页面跳转方式。它属于浏览器BOM（浏览器对象模型）里window.location对象的属性，用来读取或设置当前页面的完整URL。当我们通过JavaScript给location.href赋一个新地址时，浏览器会立刻卸载当前文档，并向新地址发起请求，从而实现页面切换。这种方式不依赖任何可视化元素，完全由脚本驱动，非常适合在逻辑判断后做自动导航。
从底层看，location.href本质是一个可读写的字符串属性。读取时返回类似https://ipipp.com/index.html的地址；写入时浏览器会调用内部导航算法，等同于用户点击了一个指向该URL的链接。不过和链接不同的是，脚本跳转不会经过用户手势校验（部分浏览器对跨域或弹窗有安全限制），也不会自动添加referrer之外的额外上下文。理解这一点，有助于我们在单页应用与多页应用之间合理选择跳转策略。
一、location.href基础用法与代码示例
最基础的跳转只需要一行代码。我们可以在任意脚本位置给location.href赋值，浏览器会马上离开当前页。下面例子展示点击按钮后跳转到首页，这种方式属于同步跳转，赋值语句之后的代码在跳转成功前可能还会执行一小段，但页面一旦开始卸载就会中断。
// 直接赋值实现跳转
function goHome() {
// 相对路径也可以，浏览器会基于当前URL解析
location.href = '/home.html';
}
// 带查询参数的跳转
function search(keyword) {
location.href = '/result.html?q=' + encodeURIComponent(keyword);
}
如果希望跳转到其他域，只要写完整http或https地址即可，例如location.href = 'https://ipipp.com'。需要注意的是，跨域跳转会丢失当前页面的所有内存状态，且新页面无法通过脚本访问原页面的window对象。在本地开发时，若接口返回的是127.0.0.1或192.168.0.1开头的地址，可以直接写进href做联调跳转，不需要替换。
二、location.href与location其他方法的区别
很多开发者容易混淆location.href赋值、location.assign()和location.replace()。三者都能跳页，但行为和history记录处理不同。location.href赋值和assign()都会保留当前页在历史栈中，用户点返回能回到原页；replace()则会用新页替换当前记录，返回键会跳过原页。下面的表格列出了核心差异：
| 方式 | 是否留历史 | 典型场景 |
|---|---|---|
| location.href = url | 是 | 普通导航、菜单跳转 |
| location.assign(url) | 是 | 显式调用，语义更清晰 |
| location.replace(url) | 否 | 登录后跳控制台，防退回登录页 |
从代码可读性角度，直接写location.href更简短，但在团队项目中用location.assign()能明确表达“我要导航”的意图。如果涉及敏感流程比如支付完成跳结果页，用replace()可以避免用户重复提交。需要提醒的是，这些操作触发的都是完整文档加载，和前端路由的pushState不同，后者不会重新请求HTML。
三、常见误区与避坑指南
一个常见误区是认为给location.href赋值时可以用<a>标签的href写法随意写javascript:伪协议，实际上location.href只接受合法URL字符串，写location.href = 'javascript:alert(1)'虽然某些旧浏览器会执行，但属于不安全且被标准弃用的行为，现代环境会直接报错或忽略。正确做法是用正常地址，逻辑判断放在赋值之前。
// 错误示例：不要往href塞伪协议
// location.href = 'javascript:doSomething()';
// 正确示例：先判断再跳
if (userExpired) {
location.href = '/login.html?from=' + encodeURIComponent(location.pathname);
} else {
loadData();
}
另一个坑是异步回调里跳转时，若页面已经因为其他原因卸载，赋值会无效并抛异常。建议在重要跳转前用try-catch包裹，或先判断document.readyState。此外，在微信等内置浏览器中，非用户手势触发的location.href可能被拦截，此时需要引导用户点击按钮来跳，而不是定时器自动跳。
四、结合HTML5特性的实操建议
HTML5带来了history API，但location.href仍是兜底方案。比如在单页应用里，如果路由库失效，可以用location.href做硬跳转保底。我们也可以利用URLSearchParams这个HTML5接口来构造参数，避免手动拼接出错。
// 使用URLSearchParams构造跳转地址
const params = new URLSearchParams();
params.set('id', '123');
params.set('source', 'banner');
location.href = '/detail.html?' + params.toString();
在移动端，location.href跳转会触发浏览器默认进度条，用户体验接近原生导航。若想减少白屏，可以在跳转前先展示本地loading，再延迟几十毫秒赋值，让浏览器有机会渲染loading层。总之，location.href是前端跳转的基石，理解其同步本质和历史记录影响，才能写出稳健的导航逻辑。
location_href页面跳转HTML5修改时间：2026-08-07 02:48:30