js怎么实现网页跳转

使用 window.location.href

通过修改 window.location.href 属性实现跳转，这是最常用的方法：

window.location.href = "https://example.com";

使用 window.location.replace

replace 方法会替换当前页面，不会在浏览器历史记录中留下痕迹：

window.location.replace("https://example.com");

使用 window.open

在新窗口或标签页中打开链接，可通过参数控制是否在新窗口打开：

window.open("https://example.com", "_blank");

使用 location.assign

assign 方法会加载新页面并在历史记录中保留当前页面：

window.location.assign("https://example.com");

使用 HTML 的 meta 标签

通过设置 meta 标签实现自动跳转，适用于纯 HTML 场景：

<meta http-equiv="refresh" content="0; url=https://example.com">

使用表单提交

通过动态创建表单并提交实现跳转：

const form = document.createElement("form");
form.method = "GET";
form.action = "https://example.com";
document.body.appendChild(form);
form.submit();

使用锚点链接

通过模拟点击锚点链接实现跳转：

const link = document.createElement("a");
link.href = "https://example.com";
link.click();

使用 history.pushState

在不刷新页面的情况下修改 URL，适用于单页应用：

history.pushState({}, "", "https://example.com");

使用 history.replaceState

类似 pushState 但不会产生新的历史记录：

history.replaceState({}, "", "https://example.com");

使用服务器端重定向

在服务器端配置重定向，例如在 Node.js 中使用 Express：

res.redirect("https://example.com");

使用框架特定方法

在 React 中使用 useNavigate 钩子：

const navigate = useNavigate();
navigate("/target-page");

在 Vue 中使用 router.push：

this.$router.push("/target-page");

在 Angular 中使用 Router 服务：

this.router.navigate(["/target-page"]);

使用事件触发跳转

在按钮点击等事件中触发跳转：

document.getElementById("myButton").addEventListener("click", () => {
  window.location.href = "https://example.com";
});

使用 setTimeout 延迟跳转

延迟一定时间后执行跳转：

setTimeout(() => {
  window.location.href = "https://example.com";
}, 3000);

使用条件跳转

根据条件决定是否跳转：

if (condition) {
  window.location.href = "https://example.com";
}

使用 POST 请求跳转

通过 POST 请求跳转，适用于需要传递数据的场景：

const form = document.createElement("form");
form.method = "POST";
form.action = "https://example.com";
const input = document.createElement("input");
input.type = "hidden";
input.name = "data";
input.value = "someData";
form.appendChild(input);
document.body.appendChild(form);
form.submit();

使用 iframe 跳转

在 iframe 中加载目标页面：

const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
document.body.appendChild(iframe);

使用 WebSocket 重定向

通过 WebSocket 接收服务器指令进行跳转：

const socket = new WebSocket("wss://example.com");
socket.onmessage = (event) => {
  if (event.data === "redirect") {
    window.location.href = "https://example.com";
  }
};

使用 Service Worker 拦截跳转

通过 Service Worker 拦截请求并重定向：

self.addEventListener("fetch", (event) => {
  if (event.request.url.includes("redirect")) {
    event.respondWith(Response.redirect("https://example.com"));
  }
});

使用 JavaScript 书签

创建可点击的 JavaScript 书签实现跳转：

javascript:window.location.href="https://example.com";

使用框架路由对象

在 SPA 框架中直接操作路由对象：

// React Router v6
const navigate = useNavigate();
navigate("/new-page");

// Vue Router
this.$router.push("/new-page");

// Angular Router
import { Router } from "@angular/router";
constructor(private router: Router) {}
this.router.navigate(["/new-page"]);