窗口事件
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的查询部分 ?后面的部分(包含?)
根据以上知识完成的商品与商品详情案例