BOM (浏览器对象模型)
简介
作用:提供了独立的内容与浏览器窗口进行交互,因为BOM的核心功能是管理窗口和窗口之间的通讯。所以说BOM当中核心对象是window
。
BOM里面包括了诸多对象,由这些对象共同构成了BOM,这诸多的对象当中提供了很多方法
和属性就是BOM实现功能的依据。
BoM最初是NetScape浏览器标准的一部分。
window对象
window对象是BOM的核心对象,其他对象都是通过BOM延申而来。可以说其他
的对象上的子对象。因为window对象是最顶层的对象,所以window对象的方
法在调用过程中可以不写window
子对象 history
主要处理的是浏览器窗体当中的导航
方法(api)
history.go
: 切换访问,参数为正数则模拟的是浏览器当中的前进按钮为负数则模拟的是浏览器当中的后退
//点击前进到下一个网页
btn.onclick = function(){
history.go(1);
}
//点击后退一个网页
btn.onclick = function(){
hostory.go(-1);
}
history.back
后退一次
history.forward
前进一次
子对象 lacation
获取和设置窗口的url,并且可以解析url
url
统一资源定位符
lacation属性
hash
: url当中#后面的内容
host
: 域名(带有端口号)
hostname
: 域名(不带端口号)
herf
: 完整的url地址
pathname
: 域名后的内容(路径)
port
: 端口
protocol
: 协议 (http等)
search
: 表示请求的参数
toString
: 可以将域名变成纯粹的字符串
子对象 navigator
查看浏览器和操作系统的相关信息
navigator的属性
appCodeName
浏览器代码名
appName
官方浏览器的字符串表示
appVersion
浏览器版本信息
cookieEnable
检测浏览器是否开启cookie,true表示开启
userAgent
用户代理头
子对象 screen
屏幕
screen 属性
availHeight
窗口可以使用的屏幕高度,单位像素
availWeight
窗口可以使用的屏幕宽度
colorDepth
浏览器表示的颜色位置
height
屏幕高度
width
屏幕宽度
子对象 frames
浏览器框架集合对象
常用api
moveBy
相对窗口的当前坐标把它移动指定的像素(IE能用)
window.moveBy(x,y);
moveTo
当前窗口移动到指定的坐标位置
window.moveTo(x,y);
resizeBy
调整窗口大小
window.resizeBy(x,y);
resizeTo
动态调整窗口的大小
window.resizeTo(x,y);
scrollTo
可把内容滚动到指定的坐标
scrollTo(xpos,ypos)
scrollBy
可把内容滚动指定的像素数
scrollBy(xnum,ynum)
focus
获取聚焦
documentElement.focus();
blur
失去焦点
documentElement.blur();
open
打开网页
window.open('http://www.baidu.com');
属性
innerWidth
浏览器窗口可视区宽度(不包括浏览器控制台,菜单栏,工具栏) 不兼容IE9以下
innerHeight
浏览器窗口可视区高度(不包括浏览器控制台,菜单栏,工具栏) 不兼容IE9以下
document.documentElement.clientWidth
浏览器窗口可视区宽度(不包括浏览器控制台,菜单栏,工具栏) IE低版本可用
document.documenElement.clientHeight
浏览器窗口可视区高度(不包括浏览器控制台,菜单栏,工具栏) IE低版本可用
outerHeight
浏览器整体高度
outerWidth
浏览器整体宽度