当前位置:首页 > JavaScript

怎么用js实现页面跳转

2026-01-31 06:05:33JavaScript

使用 window.location.href

设置 window.location.href 为目标 URL,浏览器会立即跳转:

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

使用 window.location.replace

href 类似,但不会在历史记录中留下当前页面的记录:

怎么用js实现页面跳转

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

使用 window.open

在新窗口或标签页中打开目标 URL,可通过参数控制行为:

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

使用 meta 标签自动跳转

通过 HTML 的 <meta> 标签实现定时跳转(通常用于 SEO 或重定向场景):

怎么用js实现页面跳转

<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(现代浏览器)

通过 window.navigation.navigate 实现(需浏览器支持):

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

注意事项

  • 跳转前可添加条件判断或异步操作。
  • 部分方法可能被浏览器弹窗拦截策略限制。
  • 考虑兼容性,优先使用 window.location.href

标签: 跳转页面
分享给朋友:

相关文章

vue实现前端跳转

vue实现前端跳转

Vue 实现前端跳转的方法 在 Vue 中实现前端跳转通常使用 Vue Router,以下是几种常见的跳转方式: 声明式导航(模板中使用 <router-link>) 在模板中直接使用…

vue实现页面跳转

vue实现页面跳转

vue实现页面跳转的方法 在Vue中实现页面跳转主要有以下几种方式: 使用router-link组件 router-link是Vue Router提供的组件,用于声明式导航: <rout…

vue实现两个登录页面

vue实现两个登录页面

实现多个登录页面的方法 在Vue项目中实现两个不同的登录页面,可以通过路由配置和组件分离的方式完成。以下是具体实现方法: 配置路由文件 在router/index.js中定义两个独立的路由,分别…

js实现页面跳转

js实现页面跳转

使用 window.location.href 通过修改 window.location.href 属性实现页面跳转: window.location.href = 'https://exampl…

h5实现页面跳转页面跳转页面

h5实现页面跳转页面跳转页面

H5 实现页面跳转的方法 使用 <a> 标签实现跳转 通过超链接标签 <a> 的 href 属性指定目标页面路径,用户点击后跳转。 <a href="target.…

vue 实现跳转

vue 实现跳转

Vue 实现页面跳转的方法 在 Vue 中实现页面跳转可以通过多种方式,以下是常见的几种方法: 使用 router-link 组件 router-link 是 Vue Router 提供的组件,用…