使用JS跳转页面的方法

发布时间:2024年01月03日


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

🌸 页面跳转简介

在网页开发中,经常需要通过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代表跳转地址。

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

文章来源:https://blog.csdn.net/sweetser/article/details/135348233
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。