怎么合作做网站,装修公司装饰,为了同学都能访问网站如何做,网站开发职业访谈HTML页面之间的数据传递 1.通过window.location.href发送#xff0c;location.search接收2.通过window.location.open()发送 1.很多小伙伴在做页面时#xff0c;有没有想过两个页面之间如何在跳转的同时#xff0c;还能够传递一些数据过去 2.跳转页面时#xff0c;我们… 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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebutton{width: 300px;height: 300px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: aquamarine;}/style
/head
bodyh1 styletext-align: center;01.html/h1button点击我跳转/button
/body
scriptlet buttondocument.getElementsByTagName(button)[0]button.onclickfunction(){//路径参数名参数值window.location.href ./02.html?unamezhangsan//2.下面这种方式将数据进行编码可以传递中文不出现乱码推荐// window.location.href encodeURI(./02.html?uname哈哈);}
/script
/html1这里我们利用location.search来接收数据
02.html页面代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebutton {width: 300px;height: 300px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: aquamarine;}/style
/headbodyh1 styletext-align: center;02.html/h1button点击我弹出接收信息/button
/body
scriptvar name location.search;// var name decodeURI(document.URL)//获取到编码的数据并进行解码推荐//获取到的数据其实是 ?unamezhangsan//下面是对数据进行处理namename.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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebutton{width: 300px;height: 300px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: aquamarine;}/style
/head
bodyh1 styletext-align: center;01.html/h1button点击我跳转/button
/body
scriptlet buttondocument.getElementsByTagName(button)[0]button.onclickfunction(){//路径参数名参数值 使用encodeURI进行编码可以传中文window.open(encodeURI(./02.html?uname哈哈哈))}
/script
/html02.html页面代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebutton {width: 300px;height: 300px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: aquamarine;}/style
/headbodyh1 styletext-align: center;02.html/h1button点击我弹出接收信息/button
/body
script//对数据进行解码var name decodeURI(document.URL)//获取到的数据其实是 ?uname哈哈哈//下面是对数据进行处理namename.slice(name.indexOf()1)var button document.querySelector(button);button.onclick function () {alert(name)}
/script
/html效果如下所示 觉得对你有帮助的话点个赞再走吧
