js路由跳转的几种方式以及介绍

睿麒

已于 2023-01-05 18:16:39 修改

阅读量5.4k

点赞数 6

分类专栏：日常笔记文章标签： javascript 前端 html

于 2022-12-09 17:30:06 首次发布

本文链接：https://blog.csdn.net/Ruiqi8/article/details/128256647

版权

日常笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

第一种：(跳转到b.html)

 <script language="javascript" type="text/javascript">
   window.location.href="b.html";
 </script>

第二种：（返回上一页面）

 <script language="javascript">
   window.history.go(-1);
 </script>

第三种：

 <script language="javascript">
   window.navigate("b.html");
 </script>

Location href 属性

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 **window.location.**xxx 格式的相关属性对其进行访问。

href 是返回一个完整的url地址（返回完整的URL）

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

Screen 对象属性

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

使用 JS 实现页面跳转的几种方式总结

第一种：使用JS跳转页面

1）跳转带参

 <script language="javascript" type="text/javascript">
        window.location.href="jingxuan.do?backurl=" + window.location.href; 
 </script>

2）跳转无参

 <script>window.location.href='http://blog.yoodb.com';</script>

第二种：返回上一次预览界面

 <script language="javascript">
   alert("返回");
   window.history.back(-1);
 </script>

HTML页面嵌套

 <a href="javascript:history.go(-1)">返回上一步</a>
 <a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>

第三种：button按钮添加事件跳转

 <input name="前端知音" type="button" value="前端知音" onClick="location.href='login.do'">

第四种：在新窗口打开

 　<a href="javascript:" onClick="window.open('login.do','','height=500,width=611,scrollbars=yes,status=yes')">新窗口</a>

第五种：通过meta设置跳转页面

<head>
     <!--只刷新不跳转 -->
     <meta http-equiv="refresh" content="5">
     <!--定时跳转 -->
     <meta http-equiv="refresh" content="5;url=index.html"> 
 </head>