JavaScript实现页面跳转的三种方法详解

更新时间：2026年03月01日 16:34:15 作者：xixixin_

这篇文章主要介绍了JavaScript实现页面跳转的三种主要方法：window.open()、window.location.href和window.location.replace(),包括它们的特点、适用场景及最佳实践,需要的朋友可以参考下

window.open() 打开新窗口/标签页

在新窗口或标签页中打开指定 URL

// 参数说明：
// url：要打开的地址（可选）
// target：窗口目标（_blank新窗口、_self当前窗口等）
// features：窗口特征（尺寸、位置等）
// replace：是否替换历史记录
window.open(url, target, features, replace)

// 新标签页打开
window.open('https://example.com', '_blank');

// 当前页面打开
window.open('https://example.com', '_self');

// 打开特定大小的窗口
window.open('https://example.com', 'popup', 'width=600,height=400');

特点：

可控制是否在新窗口打开
可自定义窗口大小和位置
可能被浏览器弹窗拦截
返回新窗口的引用

修改链接的 href 属性

通过更新链接的 href 属性实现跳转

// HTML: <a id="myLink" href="#" rel="external nofollow" >跳转</a>

// 方式1：直接修改 href
document.getElementById('myLink').href = 'https://example.com';

// 方式2：通过点击事件
document.getElementById('myLink').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认行为
  window.location.href = 'https://example.com';
});

特点：

保持链接的语义和可访问性
不会被弹窗拦截
用户体验更符合预期
适用于动态更新导航链接

window.location.href 当前页面重定向

在当前窗口加载新页面

// 直接跳转（添加到历史记录）
window.location.href = 'https://example.com';

// 替换当前历史记录（无法回退）
window.location.replace('https://example.com');

// 刷新当前页面
window.location.reload();

特点：

在当前窗口跳转
会添加到浏览器历史记录
不会被弹窗拦截
replace() 方法不添加历史记录点

方法	跳转方式	历史记录	弹窗拦截	适用场景
window.open()	新窗口 / 标签页	新窗口有自己的历史	可能被拦截	需要在新窗口打开内容
修改href	当前窗口	添加新记录	不会被拦截	动态更新导航链接
window.location	当前窗口	添加或替换记录	不会被拦截	编程式页面重定向

最佳实践：

需要新窗口时使用 window.open()
页面内导航使用 window.location.href
避免在用户未交互时使用 window.open()
考虑无障碍访问和用户体验

以上就是JavaScript实现页面跳转的三种方法详解的详细内容，更多关于JavaScript实现页面跳转的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

javascript实现文件拖拽事件
这篇文章主要为大家详细介绍了javascript实现文件拖拽事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03
微信小程序分享小程序码的生成（带参数）以及参数的获取
这篇文章主要介绍了微信小程序分享小程序码的生成（带参数）以及参数的获取，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
这篇文章主要介绍了JavaScript学习小结之被嫌弃的eval和with实例详解的相关资料,需要的朋友可以参考下
2016-08-08
Uniapp接入插件的3种方式总结
我们在做uniapp的项目的时候经常需要用到各种插件,下面这篇文章主要给大家介绍了关于Uniapp接入插件的3种方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
全面解析js中的原型,原型对象,原型链
这篇文章主要介绍了图解js中的原型,原型对象,原型链,帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2021-01-01
uni-app和web-view页面相互传参方法实例
web-view是一个web浏览器组件,可以用来承载网页的容器,会自动铺满整个页面,下面这篇文章主要给大家介绍了关于uni-app和web-view页面相互传参的相关资料,需要的朋友可以参考下
2023-06-06
UniApp表单校验两种方式对比详解
本文对比了UniApp中表单校验的命令式和声明式两种方式,通过实战示例展示了它们的优缺点,并有详细的代码示例供大家参考,需要的朋友可以参考下
2025-03-03
uniapp中使用videojs构建H5直播播放器
这篇文章主要为大家介绍了uniapp中使用videojs构建H5直播播放器实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
JS奇技之利用scroll来监听resize详解
这篇文章主要给大家介绍了JS奇技之利用scroll来监听resize的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
javascript实现视频弹幕效果(两个版本)
这篇文章主要为大家详细介绍了javascript实现视频弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11