首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript页面跳转

JavaScript实现页面跳转的方式总结

2025-07-25 09:55:05 作者：Bi8bo

在现代Web开发中,页面跳转是实现导航功能的基础操作,JavaScript提供了多种方式来实现页面跳转,从简单的URL重定向到复杂的单页面应用(SPA)路由,本文将全面总结JavaScript实现页面跳转的各种方法、适用场景及最佳实践,需要的朋友可以参考下

前言：

JavaScript是一种基于ECMAScript标准开发的脚本语言，它主要用于网页和网页应用程序的开发。相信很多人在开发Web程序的时候，对于页面之间的跳转，有很多种方式。本章内容就是简述了我们在开发过程中所能用到的一些跳转方式。

一、为什么要使用页面跳转

导航：用户点击链接或按钮，跳转到不同的页面，实现页面间的切换和导航。
表单处理：在表单提交后，可以将数据发送到服务器进行处理，然后跳转到相应的结果页面，以展示处理结果。
身份验证：用户登录或注册成功后，可以跳转到受保护的页面，以确保用户已经通过身份验证。
动态加载内容：通过页面跳转，可以根据用户的操作或输入，动态加载不同的内容，实现更好的用户体验。
单页应用：在单页应用中，通过页面跳转可以实现不同路由之间的切换，实现页面和数据的动态加载。

二、常见的跳转方式演示：

1. location.href

使用 location.href 属性可以设置或获取当前页面的 URL。通过将其值设置为新的 URL，可以实现页面跳转。

<script>

//给URL赋值会跳转指定网址
 window.location.href="./index.html";
 //不赋值 则返回当前页面的URL
 let a=location.href;
 alert(a);   

</script>

2.history.go（）

使用history.go()方法可以跳转到指定的历史记录索引。负数表示后退，正数表示前进。

<script>

// 后退一步
history.go(-1);
 
// 前进一步
history.go(1);

</script>

3.history.back()

history.back()方法可以让浏览器后退到历史记录中的上一个页面。与history.go() 功能一样

<script>
history.back();
</script>

4.location.assign（）

使用 location.assign() 方法同样可以实现页面跳转。它接受一个 URL 参数作为要跳转的目标地址。

<script>
// 跳转到指定的 URL 地址
 window.location.assign('./index.html');
 
</script>

5. self.location

在JavaScript中，self.location是一个非常重要的属性，它主要用于获取或设置当前窗口对象的位置信息。由于self是对当前窗口对象的引用，因此在多窗口被打开的情况下，我们可以保证正确调用当前窗口内的函数或属性。

<script>
//在当前窗口打开指定网页
 self.location='https://www.taobao.com/';
 
</script>

6.top.location

top.location表示顶层窗口的位置信息，它主要用于在顶层窗口中打开新的页面。

<script>

//在顶层窗口中打开指定页面
top.location='https://www.taobao.com/';

</script>

7.location.replace

location.replace() 方法可以实现页面跳转，但与前两种方式不同的是，它会替换当前页面的历史记录，导致用户无法返回到前一个页面

<script>

// 跳转到指定的 URL 地址，并替换当前页面的历史记录
 location.replace('https://www.taobao.com/');
 
</script>

8. window.open()

它可以在一个新窗口或选项卡中打开一个指定的 URL。

<script>
//在原有的窗口上打开一个指定的URL
 window.open('https://www.taobao.com/','淘宝网','width=300px,height=200px,top=100px,left=100px')

// 在新窗口中打开指定的 URL 地址
  window.open('https://www.taobao.com/'）；
</script>

效果图演示：

三、页面跳转方式联合HTML按钮演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js页面跳转的几种方式？</title>
 <script>
    //跳转到index.html页面
    function fun1(){
      location.href="./index.html";
    }
    //后退一页
    function fun2(){
      window.history.go(1);
    }
    //跳转到index.html页面
    function fun3(){
      window.location.assign('./index.html');
    }
    //跳转到淘宝网
    function fun4(){
      self.location='https://www.taobao.com/';
    }
    //跳转到淘宝网
    function fun5(){
      window.top.location='https://www.taobao.com/';
    }
    //替换当前页面为淘宝网
    function fun6(){
      location.replace('https://www.taobao.com/');
    }
    //打开淘宝网
    function fun7(){
      window.open('https://www.taobao.com/','淘宝网','width=300px,height=200px,top=100px,left=100px')
    }
    //后退一页
    function fun8(){
      history.forward();
    }
    //前退一页
    function fun9(){
      history.back();
    }

  </script>
</head>
<body>
<input type="button"value="登录1" onclick="fun1()">
<input type="button"value="登录2" onclick="fun2()">
<input type="button"value="登录3" onclick="fun3()">
<input type="button"value="登录4" onclick="fun4()">
<input type="button"value="登录5" onclick="fun5()">
<input type="button"value="替换当前网页" onclick="fun6()">
<input type="button"value="小窗口形式打开新网页" onclick="fun7()">
<input type="button"value="前进" onclick="fun8()">
<input type="button"value="后退" onclick="fun9()">
</body>
</html>

运行效果展示：

以上内容就是实现页面跳转的几种方式了

到此这篇关于JavaScript实现页面跳转的方式总结的文章就介绍到这了,更多相关JavaScript页面跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！