Javascript实现页面跳转的几种方式

最新推荐文章于 2024-04-19 11:46:49 发布

Bi8bo

最新推荐文章于 2024-04-19 11:46:49 发布

阅读量1.4k

点赞数 24

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/2302_77874940/article/details/135271775

版权

前言：
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>