目录
前言:
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>
运行效果展示:
以上内容就是实现页面跳转的几种方式了 谢谢观看❀❀