一、定义
BOM(Browser Object Model) 即浏览器对象模型,主要是指一些浏览器内置对象如:
window 全局对象 具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览器窗口的一个接口、
location 与地址栏内容相关、
navigator 浏览器相关的内容,通常判断浏览器类型都是通过这个对象、
screen 判断屏幕的高度宽度、
history 访问浏览器的历史记录,如前进、后台、跳转到指定位置
document DOM是属于BOM的一个属性,
等对象,用于完成一些操作浏览器的特定API。
其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。
二、详述
1.window
moveBy() 函数 moveTo() 函数 resizeBy() 函数 resizeTo() 函数 scrollTo() 函数 scrollBy() 函数
focus() 函数 blur() 函数 open() 函数 close() 函数 alert() 函数 confirm() 函数 prompt() 函数 defaultStatus 属性 status 属性 opener 属性
setTimeout() 函数 clearTimeout() 函数 setInterval() 函数 clearInterval() 函数
常用场景
1.1获取窗口相对于屏幕左上角的位置
window.onresize = function() {
var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenLeft === 'number') ? window.screenTop : window. screenY;
document.write(leftPos+","+topPos);
console.log(leftPos+","+topPos);
}
1.2移动窗口,调整窗口大小
window.moveTo(0,0) window.moveBy(20,10) window.resizeTo(100,100); window.resizeBy(100,100);
注意,这几个方法在浏览器中很可能会被禁用。
1.3获得浏览器页面视口的大小
var pageWith=document.documentElement.clientWidth||document.body.clientWidth; var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
1.4导航和打开窗口
window.open()既可以导航到特定的URL,也可以打开一个新的浏览器窗口,其接收四个参数,要加载的url,窗口目标(可以是关键字_self,_parent,_top,_blank),一个特性字符串,以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传递第一个参数。
注意,在很多浏览器中,都是阻止弹出窗口的。
1.5定时器
setTimeout(code,millisec)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
code 必需,要调用的函数后要执行的 JavaScript 代码串。
millisec 必需,在执行代码前需等待的毫秒数。
clearTimeout(对象) 清除已设置的setTimeout对象
1.6系统对话框
alert():带有一个确定按钮
confirm():带有一个确定和取消按钮
prompt():显示OK和Cancel按钮之外,还会显示一个文本输入域
1.7 scroll系列方法
scrollHeight和scrollWidth 对象内部的实际内容的高度/宽度(不包括border)
scrollTop和scrollLeft 被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离
onscroll事件 滚动条滚动触发的事件
2.document
write() 函数 writeln() 函数 document.open() 函数 document.close() 函数
...
3.location对象
location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。
location.hash #contents 返回url中的hash,如果不包含#后面的内容,则返回空字符串
location.host best.cnblogs.com:80 返回服务器名称和端口号
location.port 80 返回端口号
location.hostname best.cnblogs.com 返回服务器名称
location.href http://best.cnblogs.com 返回当前加载页面的完整url
location.pathname /index.html 返回url中的目录和文件名
location.protocol http 返回页面使用的协议
location.search ?q=javascript 返回url中的查询字符串
改变浏览器的位置:location.href=http://www.baidu.com
如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录,用户不能回到前一个页面。
location.reload():重置当前页面,可能从缓存,也可能从服务器;如果强制从服务器取得,传入true参数
4.history对象
history对象保存着用户上网的历史记录,使用go()实现在用户的浏览记录中跳转:
history.go(-1) 等价于history.back() history.go(1) 等价于 history.forward() history.go(1) //前进两页 history.go('cnblogs.com')
5.navigator对象
navigator.userAgent:用户代理字符串,用于浏览器监测中、
navigator.plugins:浏览器插件数组,用于插件监测
navigator.registerContentHandler 注册处理程序,如提供RSS阅读器等在线处理程序。
浏览器名称 navigator.appCodeName 次版本信息 navigator.appMinorVersion 完整的浏览器名称 navigator.appName 浏览器版本 navigator.appVersion 浏览器编译版本 navigator.buildID 是否启用cookie navigator.cookieEnabled 客户端计算机CPU类型 navigator.cpuClass 浏览器是否启用java navigator.javaEnabled() 浏览器主语言 navigator.language 浏览器中注册的MIME类型数组 navigator.mimeTypes 是否连接到网络 navigator.onLine 客户端计算机操作系统或者CPU navigator.oscpu 浏览器所在的系统平台 navigator.platform 浏览器中插件信息数组 navigator.plugins 用户的首选项 navigator.preference() 产品名称 navigator.product
产品的次要信息 navigator.productSub 操作系统的语言 navigator.systemLanguage 浏览器的用户代理字符串 navigator. userAgent 操作系统默认语言 navigator.userLanguage 用户个人信息对象 navigator.userProfile 浏览器品牌 navigator.vendor 浏览器供应商次要信息 navigator.vendorSub
参考链接1
参考链接2