在现代网页开发中，JavaScript 扮演了至关重要的角色，特别是在处理页面跳转时，JS 提供了多种方法来改变浏览器的当前位置或加载新的 URL，本文将深入探讨 JavaScript 中的几种常见跳转方法及其应用场景。
`window.location`
使用方法
window.location = 'https://www.example.com';
特点
简单直接：这是最常见和最简单的跳转方法。
覆盖当前页面：会替换当前页面的内容，不会保留历史记录。
支持相对路径：可以是绝对路径也可以是相对路径。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="window.location='https://www.example.com'">跳转到 Example</button>
</body>
</html> 2.window.location.href
使用方法
window.location.href = 'https://www.example.com';
特点
window.location 就是window.location.href 的别名。
可读性好：明确表示要更改的是 URL 的 href 属性。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="window.location.href='https://www.example.com'">跳转到 Example</button>
</body>
</html> 3.window.location.assign()
使用方法
window.location.assign('https://www.example.com'); 特点
功能与window.location 和window.location.href 相同：也是用于替换当前页面内容。
语义化更好：明确表示分配一个新的 URL。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="window.location.assign('https://www.example.com')">跳转到 Example</button>
</body>
</html> 4.window.location.replace()
使用方法
window.location.replace('https://www.example.com'); 特点
不会保留历史记录：与window.location 不同，使用replace 方法后，用户无法通过浏览器的“后退”按钮返回到之前的页面。
适用于防止用户返回表单页面：常用于提交表单后重定向，避免用户重复提交。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="window.location.replace('https://www.example.com')">跳转到 Example (无历史记录)</button>
</body>
</html> `window.open()`
使用方法
window.open('https://www.example.com', '_blank'); 特点
打开新标签页或窗口：可以在新标签页或弹出窗口中打开指定的 URL。
第二个参数指定目标：可以是_blank（新标签页）、_self（当前窗口）、_parent（父框架）等。
第三个参数配置特性：可以设置特性如resizable,scrollbars 等。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="window.open('https://www.example.com', '_blank')">在新标签页中打开 Example</button>
</body>
</html> 6.history.pushState() 和history.replaceState()
使用方法
history.pushState(null, '', 'new-url'); history.replaceState(null, '', 'new-url');
特点
修改浏览器历史记录：不会重新加载页面，但会更新浏览器的历史记录。
配合单页面应用（SPA）使用：常用于前端路由，实现页面的无刷新跳转。
pushState 添加历史记录：用户可以使用“后退”按钮返回到之前的页面。
replaceState 替换当前历史记录：用户无法通过“后退”按钮返回到之前的页面。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="history.pushState(null, '', '/new-page')">推送新状态</button>
<button onclick="history.replaceState(null, '', '/new-page')">替换当前状态</button>
</body>
</html> 7.history.go() 和history.back() /history.forward()
使用方法
history.go(-1); // 后退一页 history.back(); // 后退一页 history.forward(); // 前进一页
特点
操作浏览器历史记录：用于在浏览器的历史记录中导航。
n 为正数时前进，为负数时后退。
history.back()：后退一页。
history.forward()：前进一页。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="history.go(-1)">后退一页</button>
<button onclick="history.back()">后退一页</button>
<button onclick="history.forward()">前进一页</button>
</body>
</html> 相关问答 FAQs
1.window.location 和window.location.href 有什么区别？
答：window.location 和window.location.href 没有区别，它们是等价的，都用于获取或设置当前页面的 URL，使用哪一个更多是个人或团队的编码习惯问题。
window.location = 'https://www.example.com'; // 等同于 window.location.href = 'https://www.example.com';
2. 如何实现页面无刷新跳转并更新浏览器地址栏？
答：可以使用history.pushState() 方法来实现页面无刷新跳转并更新浏览器地址栏，这种方法常用于单页面应用（SPA）的前端路由。
history.pushState(null, '', 'new-page');
这样可以实现页面无刷新跳转，并且浏览器地址栏也会更新为新的 URL。
小伙伴们，上文介绍了“js跳转”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1369927.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复