JavaScript BOM对象

一、window对象

顾名思义window是窗口的意思，也就是浏览器的窗口，所有浏览器都支持window对象，因此所有的JavaScript全局对象，函数，变量都是window对象的成员

全局变量是window对象的属性

全局函数是window对象的方法

子对象：

属性：

方法：

二、location 对象

location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面

跳转的多种方式

案例：点击链接跳转详情页

第一个页面：

 // search 传递多个参数获取
 var search = window.location.search;
 //获取的？之后的字符串去掉问好，其余的分割
 var arr = search.substring(1).split('&');
 // 方法1 字符串截取
 // for(var i = 0;i<arr.length;i++){
 // var val = arr[i].substring(arr[i].indexOf('=')+1);
 // console.log(val);
 // }
 //方法2 字符串分割
 for(var i = 0;i<arr.length;i++){
 console.log(arr[i].split('=')[0]);
 console.log(arr[i].split('=')[1]);
 }

搜索框传参

第二个页面

<style>
 .box{
 display: flex;
 }
 .box div{
 width: 200px;
 height: 200px;
 border: 1px solid red;
 }
 </style>
</head>
<body>
 <div class="box">
 <a href="./3-detail.html?product_id=1001">
 <div>小米</div>
 </a>
 <a href="./3-detail.html?product_id=1002">
 <div>红米</div>
 </a>
 </div>

第三个页面根据传参渲染数据

<div id="concent">
 详情页
 </div>
 <script>
 var goods = {
 code:200,
 data:[
 {
 id:1001,
 goodnames:'小米',
 price:1900,
 nums:100
 },
 {
 id:1002,
 goodnames:'红米',
 price:3900,
 nums:123
 },
 {
 id:1003,
 goodnames:'紫米',
 price:2900,
 nums:11
 }
 ]
 }
 //传递一个参数跳转
 var search = window.location.search;
 if(!search){
 concent.innerHTML = `出问题啦，请刷新试试`
 }else{
 var id = search.split('=')[1];
 var data = goods.data;
 var str = '';
 for(var i = 0;i<data.length;i++){
 if(data[i].id == id){
 str += `<p>商品名称${data[i].goodnames}</p>
 <p>商品名称${data[i].price}</p>
 <p>商品名称${data[i].nums}</p>`
 }
 }
 concent.innerHTML = str;
 }

三、history 对象

history对象是JavaScript中的一种默认对象，该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法，可以完成类似于浏览器窗口中的前进、后退等按钮的功能