1.很多小伙伴在做页面时,有没有想过两个页面之间如何在跳转的同时,还能够传递一些数据过去
2.跳转页面时,我们首先想到的是利用a标签进行跳转。
3.一般我们通过a标签的方式只能进行页面之间的跳转,而无法将想要的数据传递过去。
4.接下来将讲解两个页面之间如何进行数据的传递。
1.通过window.location.href发送,location.search接收
1这里我们一般将window.location.href绑定在点击事件上进行跳转,它类似于a标签,但是可以传递参数。
01.html页面代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: aquamarine;
}
</style>
</head>
<body>
<h1 style="text-align: center;">01.html</h1>
<button>点击我跳转</button>
</body>
<script>
let button=document.getElementsByTagName("button")[0]
button.onclick=function(){
//路径+参数名+参数值
window.location.href = './02.html?'+'uname='+'zhangsan'
//2.下面这种方式将数据进行编码,可以传递中文不出现乱码,推荐
// window.location.href = encodeURI('./02.html?uname=哈哈');
}
</script>
</html>
1这里我们利用location.search来接收数据
02.html页面代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: aquamarine;
}
</style>
</head>
<body>
<h1 style="text-align: center;">02.html</h1>
<button>点击我,弹出接收信息</button>
</body>
<script>
var name = location.search;
// var name = decodeURI(document.URL)//获取到编码的数据并进行解码,推荐
//获取到的数据其实是 ?uname=zhangsan'
//下面是对数据进行处理
name=name.slice(name.indexOf("=")+1)
console.log(name);
var button = document.querySelector("button");
button.onclick = function () {
alert(name)
}
</script>
</html>
效果如下:
2.通过window.location.open()发送
如果是希望打开一个新页面,而不是改变当前的页面,那么window.location.href就不适用了,此时,我们需要借助于window.open()来实现 ,它是用来打开一个新的浏览器窗口或查找一个已命名的窗口。
window open()用法
01.html页面代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: aquamarine;
}
</style>
</head>
<body>
<h1 style="text-align: center;">01.html</h1>
<button>点击我跳转</button>
</body>
<script>
let button=document.getElementsByTagName("button")[0]
button.onclick=function(){
//路径+参数名+参数值 使用encodeURI进行编码,可以传中文
window.open(encodeURI('./02.html?'+'uname='+'哈哈哈'))
}
</script>
</html>
02.html页面代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: aquamarine;
}
</style>
</head>
<body>
<h1 style="text-align: center;">02.html</h1>
<button>点击我,弹出接收信息</button>
</body>
<script>
//对数据进行解码
var name= decodeURI(document.URL)
//获取到的数据其实是 ?uname=哈哈哈'
//下面是对数据进行处理
name=name.slice(name.indexOf("=")+1)
var button = document.querySelector("button");
button.onclick = function () {
alert(name)
}
</script>
</html>
效果如下所示:
觉得对你有帮助的话,点个赞再走吧!