正如我们所知道的，javascript分为三大块，ECMAscript，BOM，DOM，ECMAscript固然重要；可是在web中使用ECMAscript很大程度上需要了解BOM即浏览器对象模型，否则ECMAscript就虎落平阳，毫无发挥之处，下面正式介绍BON。
1、window对象
window对象是BOM的核心，表示浏览器的一个实例；window对象有双重角色，即使通过js访问浏览器窗口的接口，又是ES规定的global对象。
1.1全局作用域
所有在全局作用域下声明的变量、函数都变成window的对象和方法
????var age=10 ????console.log(window.age) ???//10 ????console.log(age) ??????????//10
1.2窗口关系及框架
页面中包含框架则每个框架都有自己的window对象；并保存在frame是集合中，通过索引（从上到下，从左到右）或者框架名称访问相应的window对象，每个window对象都有个name属性，为框架名称
??<html> ??????<head> ?????????<title>frameset example</title> ??????</head> ??????<frameset> ???????????<frame src="frame.htm" name="topframe"> ???????????<frameset> ???????????????<frame src="anotherframe.htm" name="lefeframe"> ???????????????<frame src="yetanotherframe.htm" name="rightname"> ???????????</frameset> ??????</frameset> ??</html>
上述代码：一个框架为上，两个框架为下，可以这样访问
???window.frames[0] ??????window.frames["topframe"] ???top.frames[0] ???top.frames["topframe"] ???frames[0] ???frames["topframe"]
注意：
top对象始终指向的是最外层的框架即浏览器窗口，所以都可以用top来表示访问。
parent对象始终指向当前框架的直接上层框架（某一个框架内又包括其他的框架），某些情况等于top，没有框架时就是top，都是window对象。
self对象始终指向window对象，可以互换（只是为了对应起来）
1.3窗口位置
??var leftpos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX; ??var toppos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;
一般跨浏览器获取window的窗口位置
1.4导航和打开窗口
使用window.open即可，一般有四个参数：加载的URL；窗口目标；特性的字符串；新页面是否取代浏览器历史记录中加载页面的布尔值
第二个参数：窗口目标一般用框架地址或者是（_self；_parent；_top；_blank）
第三个参数：一些特性，比如height width left 等等
???document.getElementById("start").onclick=function(){ ???????????newwindow=window.open("http://id.qq.com/login/ptlogin.html","_blank","height=400,width=400,top=10,left=10,resizable=yes"); ???????????newwindow.opener=null ????????????//两个标签页可以在独立的进程中运行 ???} ???document.getElementById("close").onclick=function(){ ???????????newwindow.close() ????????????????//可以关闭 ???}由于弹出窗口的设置，一些广告就随之而来，浏览器内置弹出窗口遮蔽程序，如何检测这类工具呢？
???var block=false ???try{ ???????var weixin=window.open("http://www.baidu.com","_blank") ???????if(weixin==null){ ???????????block=true ???????} ???}catch(ex){ ????????block=true ???} ???if(block){ ????????alert("被拦截了") ???}检测调用window.open打开的窗口是否被遮蔽了，并不会阻止浏览器与被遮蔽的弹出窗口有关的消息
1.4间歇调用和超时调用
大家都知道，js是单线程语言，但是允许设置超时值和间歇时间值来调度在特定的时刻执行，setTimeout和setInterval，前者是指定时间后执行，后者是每个指定时间执行；
拿setTimeout来说；接受两个参数；第一个为函数（可以用字符串不建议），第二个为等待的毫秒数；
js解析器会将执行的代码添加到队列中按顺序执行，而setTimeout会告诉多长时间后将其纳入队列
调用setTimeout()方法返回一个数值ID表示超时调用，这个ID是计划执行代码的唯一标识符，可以用它取消超时调用；超时调用为1，间歇调用为2
???var timer=setTimeout(function(){ ????????console.log("hello world") ???},1500)间歇调用跟超时调用差不多，来个例子
???var num=0; ???var max=6; ???function change(){ ???????num++ ???????console.log("hello world") ???????if(num==max){ ???????????clearInterval(timer) ???????????alert("end") ???????} ???} ???var timer=setInterval(change,1000)1.5系统对话框
警告；提示；确认三种对话框，
alert()大家都熟悉了
confirm()返回的布尔值，所以说可以后续的操作
prompt()用于提示用户信息
??alert("这是一个警告框") ??var confirms=confirm("要不要确认啊") ????????????//返回一个布尔值 ??var prompts=prompt("你叫什么名字啊","张三") ??????//返回文本作用域的值 ????if(confirms){ ??????????console.log("great! you are smart") ??}else{ ??????????console.log("you are bad ") ??} ???if(prompts==null){ ???????console.log("null") ???}else{ ???????console.log("not null") ???}???window.print() ???//打印对话框 ???window.find() ????//查找对话框
2、location对象
提供与当前窗口加载的文档有关的信息，既是window对象的属性，又是document对象的属性
1提供文档的有关信息
2将URL解析为独立片段，使开发人员通过不同的属性访问这些片段
location有以下属性：
hash 返回URL中hash(#号后跟零个或多个字符)
host 返回服务器名称和端口号
hostname 返回不带端口号的服务器名称
href 返回当前加载页面完整的URL location对象的toString方法也返回其
pathname 返回URL中的目录或文件名
port 返回URL中指定的端口号
protocol 返回页面使用的协议
search 返回URL的查询字符串
下面以百度贴吧为例来看看具体情况
???????location.hash ???//#后面的内容 ???????"" ??????????????????????????????????????????????location.href ???????"http://tieba.baidu.com/show/zhanqi/roomList?tag_id=6" ???????location.host ???//服务器名称和端口号 ???????"tieba.baidu.com" ???????location.hostname ??//服务器名称 ???????"tieba.baidu.com" ???????location.pathname ??//URL中的目录或文件名 ???????"/show/zhanqi/roomList" ???????location.port ???//端口 ???????"" ???????location.protocol ?//页面使用协议 ???????"http:" ???????location.search ??//URL的查询字符串 ???????"?tag_id=6"
位置操作
改变浏览器的位置一般用location.href("")；改变URL就直接的设置其他的属性可以了
当改变URL后，浏览器会生成新的历史记录，浏览器后退键是可以返回的，禁用这种返回可以使用replace方法
???setTimeout(function(){ ????????location.replace("http://www.baidu.com") ???},1000)location.reload 重新加载当前显示的页面；强制从服务器加载则传递参数true即可
3、navigator对象
识别客户端浏览器的事实上的标准，每个浏览器的navigator对象都有自己的一套标准
一些属性
appCodeName 浏览器名称(Mozilla)
userAgent 用户代理字符串
等等许多
检测插件
name插件的名字；description插件的描述；filename插件的文件名；length插件所处理的MIME类型数量，非IE浏览器则用plugins数组；兼容性的办法解决
???//非IE浏览器 ???function hasPlugin(name){ ????????name=name.toLowerCase() ????????for(var i=0;i<navigator.plugins.length;i++){ ????????????????if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){ ??????????????????????return true ????????????????} ????????} ????????return false ???} ???????//IE浏览器 ???function hasIEPlugin(name){ ????????try{ ?????????????new ActiveXObject(name) ?????????????return true ????????}catch(ex){ ?????????????return false ????????} ???} ???function hasFlash(){ ?????????var result=hasPlugin("Flash") ?????????if(!result){ ???????????????result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash") ?????????} ?????????return result ???} ???function hasQuickTime(){ ?????????var result=hasPlugin("QuickTime") ?????????if(!result){ ????????????????result=hasIEPlugin("QuickTime.QuickTime") ?????????} ?????????return result ???} ???alert(hasFlash()) ???alert(hasQuickTime())注册处理程序
让一个站点指明它可以处理特定类型的信息
4、history对象
保存用户上网的历史记录，从网页打开算起；使用go方法在用户的历史记录中任意跳转。
当然还有个length属性，检测用户一打开就是你的页面即首页
???var start=document.getElementById("start") ???var close=document.getElementById("close") ???start.onclick=function(){ ???????history.go(-1) ??????????//向后一页 ??history.back() ???} ???close.onclick=function(){ ???????history.go(1) ???????????//向前一页 ??history.forward() ???}还有screen对象，浏览器窗口外部显示器信息，没多大用，屏幕对象，有width，height等属性
jsBOM内容
原文地址：https://www.cnblogs.com/iDouble/p/8427504.html