JavaScript 页面跳转的四种常用方法及区别解析

作者:窗边听雨

时间:2026-10-23

浏览:372

本文汇总了JavaScript中实现页面跳转的四种核心方法。详细对比了window.location、replace与open的行为差异,重点解析了跳转后浏览器后退功能的可用性,以及新窗口打开与当前页刷新的不同场景,帮助开发者根据实际需求选择最合适的跳转方案。

文章目录

JavaScript 页面跳转的四种常用方法及区别解析

<html> <head>  </head> <body> <input type="button" onclick="new_page()" value="new_page"/>  <input type="button" onclick="old_page()" value="old_page"/>  <input type="button" onclick="replace()" value="replace"/> </body> 

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


window.location 与 window.open 的主要区别在于:前者在当前窗口执行跳转并保留历史记录(支持后退),后者则在新的浏览器窗口或标签页中打开链接,不改变当前窗口的导航状态。

使用 window.location 属性直接赋值目标URL(如 window.location = "https://www.jb51.net")可实现页面跳转,且跳转后保留历史记录,用户可通过浏览器后退按钮返回原页面。


调用 window.location.replace() 方法(如 window.location.replace("https://www.jb51.net"))进行跳转时,会用新文档替换当前文档,因此跳转后没有后退功能,用户无法通过后退按钮回到原页面。


使用 window.open() 方法(如 window.open("https://www.jb51.net"))可以在新窗口或新标签页中打开指定链接,适用于需要保持当前页面状态同时打开新页面的场景。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章