当前位置:首页 > JavaScript

怎么用js实现页面跳转

2026-04-04 22:05:50JavaScript

使用 window.location.href

通过修改 window.location.href 属性实现跳转,是最常见的方法。直接将目标 URL 赋值给该属性即可:

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

使用 window.location.replace

href 类似,但会替换当前页面历史记录,用户无法通过浏览器后退按钮返回原页面:

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

使用 window.open

在新标签页或窗口中打开页面,可通过参数控制打开方式:

window.open("https://example.com", "_blank"); // 新标签页
window.open("https://example.com", "_self");  // 当前标签页

使用 location.assign

href 效果相同,但语义更明确:

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

使用 meta 标签自动跳转

通过动态插入 <meta> 标签实现延迟跳转(需放在 <head> 中):

const meta = document.createElement("meta");
meta.httpEquiv = "refresh";
meta.content = "5;url=https://example.com"; // 5秒后跳转
document.head.appendChild(meta);

使用表单提交跳转

通过动态创建表单并提交实现跳转(适用于需要传递数据的场景):

怎么用js实现页面跳转

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

注意事项

  • 使用 hrefassign 会保留历史记录,replace 则不会。
  • 部分浏览器可能拦截 window.open 的弹出窗口。
  • 跳转前可添加条件判断或异步操作(如确认弹窗):
    if (confirm("确认跳转?")) {
    window.location.href = "https://example.com";
    }

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

相关文章

vue实现页面属性修改

vue实现页面属性修改

Vue 实现页面属性修改的方法 Vue 提供了多种方式来动态修改页面属性,包括数据绑定、计算属性、侦听器等。以下是几种常见的方法: 数据绑定 通过 v-bind 指令或简写 : 实现动态绑定 HTM…

h5实现登录页面跳转

h5实现登录页面跳转

实现登录页面跳转的基本方法 使用HTML5和JavaScript实现登录页面跳转,可以通过表单提交或JavaScript事件触发。以下是几种常见方式: 表单提交跳转 在HTML中创建一个表单,通过a…

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

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

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

vue 实现页面返回

vue 实现页面返回

监听浏览器返回事件 使用 window.addEventListener 监听 popstate 事件,在 Vue 的 mounted 钩子中绑定事件,并在 beforeDestroy 钩子中移除监听…

vue点击跳转实现

vue点击跳转实现

vue点击跳转实现方法 在Vue中实现点击跳转可以通过多种方式完成,以下是几种常见的方法: 使用router-link组件 Vue Router提供了router-link组件用于声明式导航,适合在…

jquery加载页面

jquery加载页面

jQuery 加载页面内容的方法 使用 .load() 方法 通过 AJAX 请求加载远程数据并插入到指定元素中。适用于加载部分页面片段。 $("#targetElement").load("ext…