什么是BOM
- BOM是browser object model的缩写，简称浏览器对象模型
- BOM提供了独立于内容而与浏览器窗口进行交互的对象
- 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
- BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
- BOM最初是Netscape浏览器标准的一部分
TIM截图20170424125747.png
可以看到图中并没有叫BOM的 , 搜索中出现的第一个链接是Window MDN .
因为BOM并没有 specification
- BOM属于约定俗成 , 比如 Firefox 怎么实现 , chrome就照抄一下 , 包括一些其他的浏览器 . 所以会有一些独立的API,并不互相支持
大部分的通用API
window.history
这个API控制前进返回,按钮
TIM截图20170424125747.png
后退就是 , window.history.back()
前进就是 , window.history.forward()
window.history.go(-1) //等价于back()
window.history.go(1) //等价于forward()
.
window.innerHeight
获取浏览窗口的高度
.
window.location
用于操作地址栏
window.location.href = 'https://www.baidu.com' //操作跳转到百度
也可以使用这种写法window.location
- window.location.protocol 获取当前协议
"https:" - window.location.hostname 获取域名
"www.jianshu.com" - window.location.port 获取端口号
"" //没有就显示空字符串 - window.location.host 获取域名和端口号
"www.jianshu.com" 没有端口号就不显示 - window.location.pathname 获取路径
"/writer" 它不包含查询字符串 - window.location.search 获取查询字符串
"" 没有就显示空字符串 - window.location.hash 获取#后面的内容 ,fragment
"" 没有显示空字符串 , - window.location.origin 获取网站的起源, 协议+域名+端口号
"http://www.jianshu.com"
window.name
获取窗口的名字, 可以修改
window.navigator
获取 浏览器 的所有信息
window.outerHeight
获取整个浏览器的高度
window.pageXOffset
等同于window.scrollX
window.pageYOffset
等同于window.scrollY
window.parent
返回当前窗口的父窗口对象.
如果一个窗口没有父窗口,则它的 parent 属性为自身的引用.
如果当前窗口是一个 <iframe>, <object>, 或者 <frame>,则它的父窗口是嵌入它的那个窗口
window.screen
屏幕相关的信息
- window.screen.availHeight
返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。
- window.screen.availWidth
同理 , 这是宽度 - window.screen.height //屏幕的高度
- window.screen.width //屏幕的宽度
window.self
window.self === window
self(自己) 如名字一样就是它自己
你很可能覆盖全局变量
window.top
返回最顶层的祖先窗口
window打开新窗口
- window.open('https:www.baidu.com') //默认_blank
- window.open('https:www.baidu.com','_self') //它接受一个像a标签target属性,_self当前窗口打开
- window.open('https://www.baidu.com','_self',[第三个参数可设置窗口])
let f = 'height = 400px , width = 400px'
window.open('https://www.baidu.com','_blank',f)
这样可以设置一个在另一个窗口打开的,宽高个400px的窗口
let f = 'height = 400px , width = 400px , location=on'
window.open('https://www.baidu.com','_blank',f)
设置location=on , 这样就不能修改URL - 在弹出的子窗口中设置window.opener.location.reload()
这样可以设置弹出的子窗口刷新父窗口
在页面正中央打开一个制定宽高的window
window.$ = function(){ //声明一个全局变量$ , 这个函数就是对象 , 这个函数和下面的bom属性没关系
let array = []
return array
}
$.bom = { //给$绑定一个属性bom , bom是个对象
openAtCenter: function(width,height,url){ //bom对象里有一个函数叫做,openAtCenter
window.open(url,'_blank',`width=${width}px,height=${height}px,
screenX=${screen.width/2 - width/2}px,screenY=${screen.height/2 - width/2}`)
//宽高等于你传的参数 , screenX的位置是屏幕宽度的一半减去宽的一半,screenY是屏幕高度的一半,减去高度的一半
}
}
这个$的bom属性 , 之所以不写在$函数的里面 , 它会重复执行 要避免这种情况
这时候你可以设置iframe,使用下面的代码
window.opener.location.reload() //设置弹出的子窗口刷新父窗口
window.close() //关闭自己
以上就是常见的弹出窗口登录和关闭
修改查询参数 location.search
window.$ = function(){
let array = []
return array
}
$.bom = {
openAtCenter: function(width, height, url){
window.open(url, '_blank', `
width=${width}px,height=${height}px,
screenX=${screen.width/2 - width/2}px,
screenY=${screen.height/2 - height/2}px
`)
},
search: function(name, value){
let searchAll = function(){
let result = {}
let search = window.location.search
if(search[0] === '?'){
search = search.slice(1)
}
let searchArray = search.split('&')
for(var i =0;i<searchArray.length; i++){
let parts = searchArray[i].split('=')
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1] || '')
}
return result
}
let result = searchAll()
if(value === undefined){
return result[name]
}else{
if(result[name] === undefined){
location.search += `&${encodeURIComponent(name)}=${encodeURIComponent(value)}`
}else{
result[name] = encodeURIComponent(value)
let newSearch = '?'
for(let key in result){
newSearch += `${encodeURIComponent(key)}=${encodeURIComponent(result[key])}&`
}
location.search = newSearch
}
}
}
}
encodeURIComponent() & decodeURIComponent()
encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码）。
TIM截图20170426130453.png
