BOM（Browser Object Module）
BOM对象的核心是window对象，是浏览器的一个实例。它可以通过js访问浏览器窗口的一个接口，也是ECMAScript规定的Global对象。
1：在全局作用域中自定义的变量和方法，自动挂载在window对象下，就可以通过window.xxx(xxx代码自定义的方法名或属性名)来访问，而和真正window对象上定义的属性或方法不同之处是：不可以通过delete删除自定义的全局变量。
1.1：访问页面中的框架或窗口：window.frames对象，框架访问顺序是自上而下，自左向右，从0开始，也可以通过name属性访问框架
1.2：窗口window对象对应的属性，有了这些属性，才能更好的控制和认识窗口：
screenLeft,screenTop:窗口所在的位置距离屏幕的左边和上边的位置。兼容属性：screenX,screenY:
let leftPos = typeof window.screenLeft == 'number' ? window.screenLeft :window.screenX;
let topPos = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;
这个属性有点像electron中获取壳子相对于浏览器的位置一样。
操作窗口移动的方法：moveTo,moveBy
window.moveTo(0,0)//将窗口移动到屏幕的左上角
window.moveBy(2,5)//将窗口向右移动2像素，向下移动5像素
1.3:窗口window的大小：innerHeight,innerWidth,outerHeight,outerWidth,
不同浏览器会对这些api的返回不同，需要根据对应api去查看;
1.4:对窗口window的大小进行调整：resizeTo,resizeBy
window.resizeTo(100,100)//将窗口大小调整为100*100
window.resizeBy(100,50)//将窗口的宽增加100，高增加50
以上调整浏览器位置和浏览器大小的可能会被浏览器禁用掉。
1.5：窗口的打开：window.open(url,窗口目标,特性字符串,取代当前页记录的布尔值)
第三个参数的设置有些像electron中打开一个新页面，对该页面中的一些默认显示项的配置:e.g.:width,height,lleft,top,toolbar,status,scrollBars,resizeable,location,fullscreen;就是规定是否显示地址栏，工具栏，状态栏，滚动条等的一些属性
window.open方法会返回新窗口的引用，该引用可以使用对窗口的所有设置api：moveTo,moveBy,resizeTo,resizeBy等。
1.6：浏览器是单线程处理事务，所以，在浏览器中有定时任务来安排在未来某个时间段执行某项任务：setTimeout,setInterVal
1.7:窗口中有全局的系统对话框：alert,confirm,prompt,原生的弹窗，不过真是场景下一般都使用自己写的样式弹窗。
confirme执行后会根据用户点击的ok,返回true,否则返回false
let res = confirm('are you sure?')
if(res){
alert('you are so good!')
}
prompt执行后会返回输入框中的内容
var res = prompt('what is your name?','');
if(res != null){
alert('welcome'+res)
}
除此之外还有打印复选框，查找复选框：find,print;
2:BOM的另一个对象：location:
location对象既是window对象的属性，也是document的属性：负责提供当前窗口中加载的文档的有关信息；还会将URL解析为不同的字段以供开发人员访问。
2.1：location的属性：
location.hash//返回#后跟的多个字符串,带#
location.search//返回？后跟的多个查询字符串,以&分隔,带？
location.host//返回域名和端口号
location.hostname//返回域名，不带端口号
location.port//返回端口号
location.pathname//返回文件目录和文件名
location.href//返回完整的url
获取url中的查询字符
function getQuery(){
let searchStr = location.search?.substring(1);
let searchList = searchStr.split('&');//[a=b,c=d]
let args = {}
searchList.map((i,v)=>{
let item = i.split('=');
args[item[0]] = item[1]
})
return args
}
2.2 location的方法：assign,replace,reload,都可以更改浏览器中的url，起到改变浏览器的访问位置，其中replace不会生成一条历史记录中生成新记录，也不能通过回退到前一个页面(测试chrome好像会生成记录，并且可以回退呀？？？)；reload传入参数true，会强制从服务器上重新加载页面，否则从浏览器缓存中获取。
3：BOM的另一个对象：Navigator对象
是对浏览器内部属性的一个api：可以通过该api，了解到浏览器的版本appVersion,浏览器的完整名称appName,是否启用cookie:cookieEnabled,语言：language,用户代理userAgent,操作系统默认语言systemLanguage等，
3.1：Navigator对象的属性
以上列举的属性中，使用最多的是appVersion，userAgent, plugins
navigator.plugins//返回浏览器中安装的插件的一个List
4：BOM的很少用的对象：screen对象：
用于检测浏览器的一些信息，比如浏览器外的显示器的像素值等，几乎不用
5：BOM的最后一个对象：history对象：
浏览器的用户上网访问记录：
5.1:history属性：length//访问的历史记录条数
5.2:history方法：go，可以定位到某个页面，参数可以是数字（1，-1）前进后退到某一页，也可以是字符串，浏览器会跳转到历史记录中包含该字符的第一个位置。针对go，有两个简写方法：forward,back,执行一次，则前进或后退一页
history.go(2)//前进两页
history.go('baidu.com')
history.back()//后退一页
history.forward()//前进一页
总结：以上就是BOM中的左右可以用来认识当前浏览器的api，熟练的记住这些api,就可以自如的访问浏览器的一些既有属性来帮助你的开发。多数在需要识别浏览器，做不同浏览器之间的适配时需要根据不同浏览器这些特性进行特殊的处理。
网友评论