做网站有哪些主题苏州新闻今天最新消息新闻事件
HTML页面之间的数据传递
- 1.通过window.location.href发送，location.search接收
- 2.通过window.location.open()发送
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>
效果如下所示：
觉得对你有帮助的话，点个赞再走吧！