用js通过url传参把数据从一个页面传到另一个页面
2024-10-19 00:26:18
好长时间没写博客了,时值五一,外面到处人山人海,本宝宝还是好好呆在家学习吧。好了,言归正传。在没有后台支持的情况下,如何实现从一个页面像另一个页面来传递数据呢?应该很多人遇到过这个问题吧。那我就来说说我在项目中遇到的时候是如何解决的。
比如说,有两个页面,page1.html,和page2.html,在page1页面向page2页面传递数据可以通过hash值。上代码:
page1.html的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面1</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<a href="index2.html#id1">跳转到box1地方</a>
<a href="index2.html#id2">跳转到box2地方</a> </body>
<script>
window.onload = function(){
}
</script>
</html>
page2.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面2</title>
<style>
#id1{
width: 100px;
height: 100px;
background: red;
} #id2{
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="id1">box1</div>
<div style="width: 10px;height: 10px;margin-bottom: 1000px;"></div>
<div id="id2">box2</div>
</body>
<script>
window.onload = function () {
console.log(window.location.href)//此处会打印出当前页面的href值,为http://localhost:63342/HTML_ExamplePractice/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%8F%90%E5%89%8D%E7%BB%83%E4%B9%A0/index2.html#id1,井号后面的为传递的参数,需要进行处理一下
//首先要获取当前的href值
let url = window.location.href.split('#');
console.log(url);//打印出来是一个数组[‘http://localhost:63342/HTML_ExamplePractice/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%8F%90%E5%89%8D%E7%BB%83%E4%B9%A0/index2.html’,'id1'] 数组的第二个就是我们传递的数据 function goHash(hash) {
if( hash == 'id1' ){
console.log('打印出id1');//次处会打印出id1 }else if ( hash == 'id2' ){
console.log('打印出id2');//此处会打印出id2
}
}
goHash(url[1]);
}
</script>
</html>
当在page1页面中点击某一个a标签的时候,会跳转到page2页面,然后通过获取当前的href值,可以获得我们要传递的数据,后期经过处理之后加以利用。用到的知识点是hash值和锚点。。
最新文章
- 【腾讯Bugly干货分享】Android ImageView 正确使用姿势
- TextMate 小小心得
- Moqui之时间转换
- noip赛前小结3
- Redis pipeline and list
- centos 使用mutt 命令发送邮件,随笔非教程
- Dribbble客户端应用源码
- HDU 5701 中位数计数 暴力
- 如何在symfony 控制器里面创建soap web service
- OC基础 可变数组与不可变数组的使用
- EF数据迁移(当模型改变时更新数据库)
- android方向键被锁定的问题
- 使用 PyQt 转换网页到 PDF(使用QtWebKit加载完毕后,打印整个窗口就行了,真简单!)
- pytorch实现性别检测
- 【Python】正则表达式简单教程
- python字符串与列表的相互转换
- 常见网站CSS样式重置
- 问题:win10防火墙不能自动启动
- 解决IOS9 下在App中无法打开其他应用的问题
- hadoop-0.20.2安装配置