本文汇总了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"))可以在新窗口或新标签页中打开指定链接,适用于需要保持当前页面状态同时打开新页面的场景。