要实现网页自动跳转，可通过以下5种代码方案实现（根据使用场景选择）：
一、HTML元刷新（基础版）
正在跳转到新网站...
二、JavaScript跳转（推荐方案）
// 立即跳转
window.location.href = "https://www.newdomain.com";
// 延迟3秒跳转（带提示）
setTimeout(function() {
window.location.href = "https://www.newdomain.com";
}, 3000);
// 带来源检测的跳转（防重复）
if(window.location.pathname === "/index.html") {
window.location.replace("https://www.newdomain.com");
}
三、PHP服务器端跳转
// 永久重定向（301 SEO友好）
header("HTTP/1.1 301 Moved Permanently");
header("Location: https://www.newdomain.com");
exit();
?>
四、Nginx服务器配置
server {
listen 80;
server_name example.com;
# 全站301跳转
return 301 https://www.newdomain.com$request_uri;
# 特定路径跳转
location = /index.html {
return 302 https://www.newdomain.com/new-homepage;
}
}
五、React单页应用跳转
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
useEffect(() => {
// 组件加载后立即跳转
navigate('/new-page', { replace: true });
}, [navigate]);
return null;
}
技术选型建议：
方案适用场景优点缺点HTML Meta简单静态页无需JS支持无法控制取消跳转JavaScript动态页面可添加逻辑判断依赖客户端JSPHP/Node服务端渲染对SEO友好需要后端环境Nginx全站重定向最高性能需要服务器权限React/Vue单页应用路由无缝切换仅限前端框架
高级技巧：
1、条件跳转（根据设备类型跳转）
if(/Mobile|Android/i.test(navigator.userAgent)) {
window.location.href = 'https://m.newdomain.com';
} else {
window.location.href = 'https://pc.newdomain.com';
}
2、带参数传递：
const originalQuery = window.location.search;
window.location.href = `https://newdomain.com${originalQuery}`;
3、跳转前事件处理：
window.onbeforeunload = function() {
// 执行数据保存等操作
return '确认离开当前页面？';
};
注意事项：
避免频繁跳转（可能被搜索引擎降权）移动端跳转延迟建议≥1秒（防止误触后退按钮）使用301永久重定向时，清除浏览器缓存测试在Vue/React中避免在渲染阶段直接修改location
根据W3C最新规范，推荐优先使用服务器端重定向（301/302），其次是window.location.replace()方法，这两种方式对浏览器历史记录的处理更为规范