JS实现域名跳转的核心答案是：通过修改window.location对象的属性或调用其方法，将浏览器当前页面导航到目标域名，最常用的一行代码是window.location.href = "https://目标域名.com"。
接下来我会从基础写法、不同场景的处理方案、以及跳转过程中的坑位排查这几个层面展开，帮你彻底搞定这个需求，这篇内容会尽量用大白话讲透，同时保证代码可直接复制使用。
最直接的跳转写法：三兄弟各有脾气
在JavaScript里,干这活儿的主要是location对象身上的三个“员工”，它们都能让你到达新域名，但行为细节有差异，选错了可能在特定场景下出问题。
location.href：最听话的执行者
这是最常用的写法,你给它赋一个网址字符串，它立刻照办：
window.location.href = "https://www.新域名.com";
核心特征：它会往浏览器的历史记录里塞一条新记录，这意味着用户在跳转后点击浏览器自带的“后退”按钮，能回到跳转之前的旧页面，如果旧页面又自动执行了跳转代码，用户会被卡在“前进-后退-前进”的死循环里。
location.replace()：爱吃后悔药的终结者
这个方法的逻辑是“不想让你回来”：
window.location.replace("https://www.新域名.com");
核心特征：它用新页面替换掉当前页面在历史记录中的位置，用户按后退键，会直接跳到更早的页面，而不是刚才那个发起跳转的旧页面，对于登录成功后跳转、表单提交后跳转这类场景，用replace()能有效避免用户退回时重复提交表单的尴尬。
location.assign()：略带仪式感的规范派
它在行为上和直接修改href几乎完全一致，同样会生成历史记录：
window.location.assign("https://www.新域名.com");
应用场景：如果你是在封装一个工具函数，或者代码风格偏向“调用方法”而非“属性赋值”，用assign()在语义上会更明确，告诉阅读代码的人“我是有意图地进行导航”。
表格对比：到底该用谁
| 方法/属性 | 生成历史记录 | 可后退到旧页 | 推荐使用场景 |
|---|---|---|---|
| 是 | 是 | 通用场景、广告落地页跳转 |
location.replace(url) | 否 | 否 | 登录后跳转、支付成功后跳转 |
location.assign(url) | 是 | 是 | 工具函数封装、语义化要求高的项目 |
特殊场景下的跳转姿势
除了直接赋值,实际项目中经常会遇到需要“等一下再走”或者“带着数据走”的情况。
延迟跳转：给用户留三秒读提示
有时候你需要先展示一个“即将跳转”的提示页面，或者给用户几秒钟阅读一段重要通知，用setTimeout把跳转动作延后。
// 用户看到提示文案后，3秒后自动跳转
setTimeout(function() {
window.location.replace("https://www.新域名.com");
}, 3000);
这里有个小细节：建议延时设在2-5秒之间，太短了用户没反应过来，太长了会让人着急，如果要用href，写法为setTimeout(() => location.href = "目标地址", 2000)，行业共识认为，2秒是最佳折中点，既不影响体验，又不会让用户以为页面卡死了。
带参数跳转：把用户ID和来源捎上
跳转不只是换个地址,经常需要把当前页面的参数传递过去，尤其是做站点迁移或跟踪来源时。
// 获取当前URL所有参数，拼接到新域名后面 const currentParams = window.location.search; const newUrl = "https://www.新域名.com" + currentParams; window.location.replace(newUrl);
如果只想带某个特定参数,可以用URLSearchParams提取：
const params = new URLSearchParams(window.location.search);
const userId = params.get('user_id'); // 假设旧地址里有个user_id字段
if (userId) {
window.location.href = "https://www.新域名.com?user_id=" + userId;
} else {
window.location.href = "https://www.新域名.com";
}
多域名按条件分流
手头有多个备用域名,要根据用户设备或地区跳转到不同地址，这在移动端适配和国内访问海外站的场景下非常常见。
// 判断设备类型跳转
const isMobile = navigator.userAgent.match(/iPhone|iPad|Android/i);
if (isMobile) {
window.location.href = "https://m.新域名.com"; // 手机站
} else {
window.location.href = "https://www.新域名.com"; // PC站
}
避开一个隐蔽的坑：iframe里跳不出去
如果你的页面被嵌在别人的iframe里（比如被恶意套壳，或者合规的第三方合作入口），直接改location.href只会让iframe内部跳转，浏览器整个标签页地址不变，这时候要“破壳”：
// 检测是否处于iframe中
if (window.self !== window.top) {
// 让最顶层的窗口去跳转
window.top.location.href = "https://www.新域名.com";
} else {
window.location.href = "https://www.新域名.com";
}
搜索引擎优化中的跳转哲学
在写跳转代码时,要考虑搜索引擎的爬虫行为，很多场景下，用JS做跳转是下策，服务端301才是上策。
为什么不建议单纯靠JS做全站永久跳转
搜索引擎的爬虫在抓取页面时,会执行JavaScript代码来渲染页面，但这个过程比服务端跳转复杂且耗时，如果一个老站要永久换个域名，整站迁移的最佳做法是在服务器配置301重定向。
据百度搜索资源平台官方文档说明,百度爬虫对JS跳转的发现和继承速度不如301直接，如果你遇到网站更换域名后老权重丢失的情况，很大概率是因为用了JS跳转且新页面没有主动提交收录。
什么情况下JS跳转是合理的
- A/B测试：给不同用户群展示不同版本的落地页，跳转逻辑用JS控制比服务端配置更灵活。
- 前端单页应用路由切换：比如Vue、React项目里用
router.replace实现页面切换，这本质也是JS侧的URL变更。 - 按需加载第三方页面：点击“去支付”按钮后，用JS跳转到微信支付或支付宝指定的地址。
处理爬虫识别的一种补充方案
如果确实要用JS跳转,可以考虑加上<link rel="canonical">标签指向新域名，告知搜索引擎哪个地址是权威版本，这是一种保险策略，但不能完全替代301。
<link rel="canonical" href="https://www.新域名.com" />
业内专家指出,canonical标签和JS跳转搭配使用，能在一定程度上弥补权重传递的损失，但它无法彻底模拟301的所有语义。
实战踩坑排查清单
代码写完不生效,通常不是JS语法问题，而是下面几个环境因素。
第一个常见问题：代码被放到了<head>里并且没有包在DOM加载事件中，导致执行时body还没加载，某些依赖DOM元素的操作报错，跳转代码被中断，解法是放在window.onload回调里：
window.onload = function() {
window.location.href = "https://www.新域名.com";
};
第二个常见问题：浏览器弹层拦截，当你没有通过用户直接点击按钮触发跳转，而是用window.open去打开新地址时，Chrome会认为这是“非用户许可的弹窗”直接拦截，但location.href这种方式通常不会被拦截，因为它是在当前页导航，不算弹窗广告。
第三个常见问题：死循环跳转，A页面跳到B，B页面又设置了无条件跳回A，这类问题在本地测试时容易忽略，建议在代码里加上标记位（如sessionStorage）控制只跳一次：
// 判断是否已经跳转过，避免循环
if (!sessionStorage.getItem('hasRedirected')) {
sessionStorage.setItem('hasRedirected', 'true');
window.location.replace("https://www.新域名.com");
}
相关疑问速答
Q1: 用location.href跳转和location.replace跳转，哪个能防止用户退回到旧页面？
A1: location.replace能从根本上让旧页面从历史记录中消失，用户后退时会回到更早的页面，因此它更适合登录成功、表单提交这类不希望被“回退重放”的场景，而location.href允许后退，主要用于普通的信息展示页跳转。
Q2: 页面需要先向后端发送统计数据再跳转，怎么确保数据发出去？
A2: 使用navigator.sendBeacon()方法，它专门用于在页面卸载前可靠地发送少量数据，跳转前调用sendBeacon不会被浏览器中断，它能在后台完成请求，如果用传统的fetch或ajax，在跳转的瞬间请求可能被浏览器终止，造成统计数据丢失。
Q3: 如何测试JS跳转是否对百度GEO友好？
A3: 最好的测试工具是百度搜索资源平台的“抓取诊断”功能，它可以模拟百度蜘蛛抓取你的URL并查看返回内容，观察抓取到的HTML中是否包含正确的跳转逻辑，且目标页面的内容是否完整被解析，多数情况下，服务端301和JS跳转混杂使用是最差的做法，建议统一用一种方案，避免爬虫逻辑混乱。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/619583.html
