一、什么是BOM?
BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。
二、BOM对象
1、window对象
window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性。
常用属性:
- closed:返回窗口是否已被关闭。
- defaultStatus:设置或返回窗口状态栏中的默认文本。
- innerheight:返回窗口的文档显示区的高度。
- innerwidth:返回窗口的文档显示区的宽度。
- length:设置或返回窗口中的框架数量。
- name:设置或返回窗口的名称。
- opener:返回对创建此窗口的窗口的引用。
- outerheight:返回窗口的外部高度。
- outerwidth:返回窗口的外部宽度。
- pageXOffset:设置或返回当前页面相对于窗口显示区左上角的 X 位置。
- pageYOffset:设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
- parent:返回父窗口。
- self:返回对当前窗口的引用。等价于 Window 属性。
- window:window 属性等价于 self 属性,它包含了对窗口自身的引用。
- status:设置窗口状态栏的文本。
- top:返回最顶层的先辈窗口。
- screenLeft、screenTop、screenX、screenY:只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y
坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持
screenX 和 screenY。
常用方法: - window.close():关闭窗口
- window.alert(“message”):弹出一个具有OK按钮的系统消息框,显示指定的文本
- window.confirm(“Are you sure?”):弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值
- window.prompt(“What’s your name?”, “Default”):提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回
- window.status :可以使状态栏的文本暂时改变
- window.defaultStatus :默认的状态栏信息,可在用户离开当前页面前一直改变文本
- window.setTimeout(“alert(‘xxx’)”, 1000):设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数
- window.clearTimeout(“ID”):取消还未执行的暂停,将暂停ID传递给它
- window.setInterval(function, 1000):无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样
- window.clearInterval(“ID”):取消时间间隔,将间隔ID传递给它
- window.history.go(-1):访问浏览器窗口的历史,负数为后退,正数为前进
- window.history.back():同上
- window.history.forward():同上
- window.history.length :可以查看历史中的页面数
- clearInterval() :取消由 setInterval() 设置的 timeout。
- clearTimeout(): 取消由 setTimeout() 方法设置的 timeout。
- createPopup(): 创建一个 pop-up 窗口。
- moveBy() :可相对窗口的当前坐标把它移动指定的像素。
- moveTo() :把窗口的左上角移动到一个指定的坐标。
- open() :打开一个新的浏览器窗口或查找一个已命名的窗口。
- print() :打印当前窗口的内容。
- resizeBy(): 按照指定的像素调整窗口的大小。
- resizeTo() :把窗口的大小调整到指定的宽度和高度。
- scrollBy() :按照指定的像素值来滚动内容。
- scrollTo() :把内容滚动到指定的坐标。
- setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。
- setTimeout(方法,秒数) :在指定的毫秒数后调用函数或计算表达式。
2、history对象
window.history 对象包含浏览器的历史。 - history.length :浏览过的页面数
- history.back() :在浏览历史里后退一步
- history.forward() :在浏览历史里前进一步
- history.go(i) :跳转到浏览历史记录的第i位
3、screen对象
用于获取某些关于用户屏幕的信息 - window.screen.width :屏幕宽度
- window.screen.height :屏幕高度
- window.screen.colorDepth:屏幕颜色深度
- window.screen.availWidth:可用宽度(除去任务栏的高度)
- window.screen.availHeight:可用高度(除去任务栏的高度)
4、navigator对象
包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用 - window.navigator.appCodeName:浏览器代码名
- window.navigator.appName:浏览器步伐名
- window.navigator.appMinorVersion:浏览器补钉版本
- window.navigator.cpuClass:cpu类型 x86
- window.navigator.platform:操作体系类型 win32
- window.navigator.systemLanguage:客户体系语言 zh-cn简体中文
- window.navigator.userLanguage:用户语言,同上
- window.navigator.appVersion :浏览器版本(包括 体系版本)
- window.navigator.userAgent:用户代理头的字符串表示
- window.navigator.onLine:用户否在线
- window.navigator.cookieEnabled:浏览器是否撑持cookie
5、location对象
用于获得当前页面的地址 (URL) - location.href:当前载入页面的完整URL
- location.portocol:URL中使用的协议,即双斜杠之前的部分,如http
- location.host :服务器的名字,如www.wrox.com
- location.hostname:通常等于host,有时会省略前面的www
- location.port:URL声明的请求的端口,默认情况下,大多数URL没有端口信息,如8080
- location.pathname:URL中主机名后的部分,如/pictures/index.htm
- location.search:执行GET请求的URL中的问号后的部分,又称查询字符串,如?param=xxxx
- location.hash:如果URL包含#,返回该符号之后的内容,如#anchor1
- location.assign(“http:www.baidu.com”):同location.href,新地址都会被加到浏览器的历史栈中
- location.replace(“http:www.baidu.com”):同assign(),但新地址不会被加到浏览器的历史栈中,不能通过back和forward访问
- location.reload(true | false):重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false
- document.location.reload(URL) :打开新的网页