- A+
所属分类：Web前端
一、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对象的方法，可以完成类似于浏览器窗口中的前进、后退等按钮的功能
history.go(0) 刷新页面
四、navigator对象
navigator对象，也称为浏览器对象，该对象包含了浏览器的整体信息，如浏览器名称、版本号等
五、screen对象
screen对象是一个由JavaScript自动创建的对象，该对象的作用主要是描述客户端的显示器的信息，例如屏幕的分辨率、可用颜色数等。screen对象是一个全局对象，该对象中存放的都是静态属性，这些属性值是只读的
六、浏览器url的解密与加密
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 加密
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
