js跳转页面方法以及区别(教你8种js跳转页面方法亲测有用)

分类：js知识时间：2022-06-29 07:30:18

js跳转页面的方法有很多种，教你8种js跳转页面方法亲测有用，注意一下方法8不是js跳转页面方法，通过meta设置跳转页面，也可以实现跳转页面。本文主要内容是js跳转页面方法以及区别。

js跳转页面方法以及区别

方法1：window.open方法，打开新窗口

<p onClick="window.open('http://tangjiusheng.com/')">点击我就跳转</p>

方法2：window.location.href方法【推荐】

<a href="javascript:" onClick="go()">点击我就跳转</a>
<script type="text/javascript">
 function go() {
   window.location.href="http://tangjiusheng.com/"
}
</script>

可以进行页面跳转当前网页直接打开也可以用于获取当前域名

方法3：window.navigate方式实现页面跳转，仅支持IE

window.navigate("http://tangjiusheng.com/");

方法4：window.loction.replace方式实现页面跳转，注意跟第一种方式的区别

window.location.replace("http://tangjiusheng.com/");

说明：假设有3个jsp页面（1.jsp, 2.jsp, 3.jsp），进系统默认的是1.jsp，当我进入2.jsp的时候，2.jsp里面用window.location.replace(“3.jsp”);与用window.location.href (“3.jsp”);从用户界面来看是没有什么区别的，但是当3.jsp页面有一个"返回"按钮，调用window.history.go(-1); wondow.history.back();方法的时候，一点这个返回按钮就要返回2.jsp页面的话，区别就出来了，当用 window.location.replace(“3.jsp”);连到3.jsp页面的话，3.jsp页面中的调用window.history.go(-1);wondow.history.back();方法是不好用的，会返回到1.jsp。

方法5：self.location方式实现页面跳转，和下面的top.location有小小区别

self.location='http://tangjiusheng.com/';

方法6：top.location方式实现页面跳转

top.location='http://tangjiusheng.com/';

方法7：window.history.back(-1)方式实现页面跳转，不推荐这种方式跳转

window.history.back(-1);

方法8：不是js跳转页面方法，通过meta设置跳转页面

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

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.com/js/421.html

关注下头条号后，请私信将免费分享给你一份web前端资料！
立即关注

大家都在看