html 跳转页面传参、点击获取DOM参数

虽然现在前端框架已经很多，尤其是几大流行框架，比如Vue，React，Angular 等，已经去DOM化，但是还是有很多公司仍在使用 HTML + CSS + JS 。

这里记载一下用到的HTML传参问题。

一、页面之间传参：

HTML 页面跳转可以直接通过，给 href 赋值

1       $(document).on('click', '.detail', function() {
2         window.location.href = 'scorePage.html'
3       })

? 传参

1       $(document).on('click', '.detail', function() {
2         window.location.href = `scorePage.html?id=${id}&name=${name}`;
3       })

在新页面获取参数：

1 let url = location.search;
2 console.log(url); // ?id=44&name=guozheng

获取的参数要转化成json格式：封装一个函数

 1 function getParams() {
 2   let obj = new Object();
 3 
 4   let url = location.search;
 5   if(url.indexOf('?') != -1) {
 6     let str = url.substr(1);
 7     let arrs = str.split('&');
 8     arrs.map(item => {
 9       obj[item.split('=')[0]] = item.split('=')[1]
10     })
11   }
12   return obj;
13 }

这里返回的 obj 就是包含所有参数的一个对象。

二、获取 DOM 自定义的属性值。

HTML 结构：

1   <div class="box"></div>

js 代码：

这里模仿的是后台获取数据然后拼接 DOM 结构，将数据已自定义属性的方式绑定到 DOM上。

 1     let obj = {
 2       name: 'guozheng',
 3       id: 34,
 4       age: 27,
 5       sex: 'man'
 6     }
 7 
 8     let info = JSON.stringify(obj);
 9 
10     let str = `<div id="test" class="title-name" name='guo' data-info=${info}>法律价值度</div>`
11 
12     $('.box').append(str);
13 
14     $('#test').on('click', function() {
15       let info2 = $(this).attr('data-info');
16       console.log(JSON.parse(info2)); // {name: "guozheng", id: 34, age: 27, sex: "man"}
17     })