js.5.8

窗口事件

onload 当文档加载完成时运行脚本，入口函数
window.onload = function () { // 当网页或文档加载完成（包含图片、视频等）执行 }

onunload 关闭当前网页就会执行
window.onunload = function () { // 关闭当前页面时执行 }

onpageshow 当窗口可见时运行脚本
onpagehide 当窗口隐藏时运行脚本
onblur 当窗口失去焦点时运行脚本
onfocus 当窗口得到焦点时运行脚本

window.onfocus = function () {
    console.log('获取了焦点');
}
window.onblur = function(){
    console.log('失去了焦点');
}

onresize 当窗口尺寸发生改变时运行脚本
onerror 当错误发生时运行
onscroll 当元素的滚动条发生滚动时触发
window.onscroll = function (){ console.log(‘滚动条发生了变化’); }

BOM中的对象

screen对象
包含有关屏幕的信息

console.log(window.screen)

Navigator对象
有关访问者浏览器信息

console.log(window.navigator)

appCodeName 返回浏览器代码名
AppName 返回浏览器的名称
appVersion 返回平台和版本
cookieEnabled 返回是否启用cookie
language 返回浏览器语言
languages 返回代理语言
platform 返回浏览器的操作平台
product 返回浏览器内核
userAgent 客户机发送服务器的user-agent头部的值，用户代理
console.log(window.navigator);
console.log(window.navigator.product);
console.log(window.navigator.appCodeName);
console.log(window.navigator.appName);
console.log(window.navigator.appVersion);
history对象
返回浏览器的历史记录

console.log(window.history)

history对象的属性

length 返回历史记录/列表中的网址数，只读
scrollRestoration 允许应用程序在历史导航上显示的设置，默认滚动（auto）
它的两个属性值
auto 恢复用户已滚动到页面上的位置
manual 未还原上一页的位置

window.history.scrollRestoration = ‘auto’;
window.history.scrollRestoration = ‘manual’;
state 状态
history对象的方法
back() 加载history列表中的前一个url（后退）
forward() 加载history列表中的下一个url （前进）
go(number) 加载history中某个具体的页面（正数表示下一页，负数表示上一页）
先打开的页面

pushState(stateObj,title,URL)
向当前浏览器的history中添加一个状态

replaceState(stateObj,title,URL)
修改浏览器当前history的实体状态

location 对象

用于获取当前页面的地址，并把浏览器重定向到新的页面

console.log(window.location)

location属性

href 获取完整的URL，也可以进行设置，可用于跳转页面（decodeURI可解析地址）

console.log(decodeURI(window.location.href));
document.getElementById(‘btn’).onclick = function (){
window.location.href = ‘http://www.baidu.com’;
}
protocol 返回URL的协议 http(超文本传输协议) https(加密) file(本地文件) ftp(文件传输协议)
hostname 返回主机名 域名(网址) ip地址
port 返回一个URL服务器使用的端口号
host 返回主机名加端口号
origin 源 返回一个URL的协议,主机名,端口号
pathname 返回URL的路径名 资源在当前服务器上的地址
hash 返回URL的锚的部分 #后面的部分（包含#）
search 返回URL的查询部分 ?后面的部分(包含?)
根据以上知识完成的商品与商品详情案例