使用JS跳转页面的方法

本文章总结各类跳转及适用场景

🌸 页面跳转简介

在网页开发中，经常需要通过JS来实现页面跳转。本文将介绍JS跳转页面的几种常用方式。

页面跳转是指在网页中从当前页面导航到另一个页面的行为。当用户点击链接、按钮或执行某些操作时，网页会加载新的内容并显示在浏览器窗口中。页面跳转可以是在同一个网站内部的不同页面之间进行，也可以是从一个网站跳转到另一个网站。页面跳转通常用于导航到新的内容页面、执行特定的操作或者打开外部链接。跳转的方式可以是在当前窗口加载新页面，也可以是在新窗口或标签页中打开新页面。

🍂a标签跳转

适用场景：页面中跳转固定的地址
:
当前页面跳转:

<a href="https://www.baidu.com">跳转</a>

在当新窗口打开，设置target属性为_blank：

<a href="https://www.baidu.com" target="_blank">跳转</a>

🍂 location对象属性跳转

适用场景:window.location.href是覆盖当前页面跳转，在iframe嵌套内页跳转只能改变iframe的src

🍧 window.location.href 跳转到新页面

window.location.href = 'https://www.baidu.com';

:

🍧 使用 window.location.replace() 跳转到新页面，替换当前页面的历史记录

场景:window.location.replace()在iframe中使用只是重定向src地址

window.location.replace('https://www.baidu.com');

🍧 使用 window.location.assign() 跳转到新页面，保留当前页面的历史记录

window.location.assign('https://www.baidu.com');

:

🍂使用 window.open() 打开新窗口跳转到指定页面

新窗口打开一个链接：并指定一些窗口特征

window.open('https://www.baidu.com');

:

🍂 meta标签跳转

<meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn">

content="5;url=http://www.w3school.com.cn"中的5代表5秒，url代表跳转地址。

场景:适合进入页面直接跳转，这种方式可以作为了解。