通过js实现页面的跳转页面跳转页面

使用 window.location.href

通过修改 window.location.href 属性实现页面跳转。这种方式会加载新页面并保留浏览历史记录。

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

使用 window.location.replace

window.location.replace 方法会替换当前页面，不会在浏览历史中留下记录。

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

使用 window.open

window.open 方法可以在新窗口或标签页中打开页面。可以通过参数控制是否在新窗口打开。

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

使用 meta 标签自动跳转

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

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

使用表单提交跳转

通过动态创建表单并提交实现跳转，适用于需要传递参数的场景。

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

使用导航 API（现代浏览器）

现代浏览器支持 Navigation API，提供更灵活的页面跳转控制。

navigation.navigate("https://example.com");

使用 history.pushState

history.pushState 方法可以修改当前页面的 URL 而不刷新页面，适用于单页应用（SPA）。

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

使用 history.replaceState

history.replaceState 方法替换当前页面的 URL 而不刷新页面，同样适用于 SPA。

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

使用 iframe 跳转

通过动态创建 iframe 实现页面跳转，适用于特定场景。

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

使用锚点跳转

通过修改 window.location.hash 实现页面内的锚点跳转。

window.location.hash = "#section1";