浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话"。浏览器对象模型(Browser Object Model,BOM)尚无正式标准.因为现代浏览器(几乎)实现了JavaScript交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。
Window对象
所有浏览器都支持window对象。它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。甚至HTML DOM的document也是window对象的属性之一。
window.document.getElementById("header");
与下面效果相同:
document.getElementById("header") ;
Window尺寸
对于不同版本的浏览器,有不同的方法去确定浏览器窗口的尺寸。
对于Chrome、Firefox、Opera以及Safari:
- window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
- window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于IE8、7、6、5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
涵盖所有浏览器的JavaScript方案:
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth ;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight ;
Window对象的其它方法:
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸。
JavaScript Window Screen
window screen 对象包含用户屏幕的信息。window screen对象在使用时可以不带window这个前缀。常用属性:screen.availWidth - 可用的屏幕宽度;screen.availHeight - 可用的屏幕高度
screen.availWidth属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
screen.availHeight属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏
JavaScript Window Location
window.location 对象用于获得当前页面的地址(URL),并把浏览器重新定向到性能的页面。window.location对象在编写时可以不使用window这个前缀。
- location.hostname 返回web诸暨的域名
- location.pathname 返回当前页面的路径名和文件名
- location.port 返回web诸暨的端口(80或443)
- location.protocol 返回所使用的web协议(http://或https://)
Window Location Href
location.href 返回当前页面的(完整)URL
Window Location Pathname
location.pathname属性返回URL的路径名
Window Location Assign
location.assign()方法加载新的文档。语法:window.location.assign("http://www.w3cschool.cc") ;
JavaScript Window History
window.history 对象包含浏览器的历史。window.history在编写时可不使用window这个前缀。为了保护用户的隐私,对JavaScript访问该对象的方法做出了限制。常用方法:
- history.back() -与在浏览器点击后退按钮相同,加载历史列表中的前一个URL
- history.forward() - 与在浏览器点击向前按钮相同,加载历史列表中的下一个URL
JavaScript Window Navigaror
window.navigator对象包含有关访问者浏览器的信息。window.navigator对象在编写时可不使用window这个前缀。常用的属性:
- navigator.appCodeName - 浏览器代号
- navigator.appName - 浏览器名称
- navigtor.appVersion - 浏览器版本
- navigator.cookieEnabled - 启用cookie
- navigtor.platform - 硬件平台
- navigator.userAgent - 用户代理
- navigator.systemLanguage - 用户代理语言
注意:来自navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,因为:
- navigator数据可被浏览器使用者更改
- 一些浏览器对测试站点会识别错误
- 浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于navigator可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象,可以使用对象里检测浏览器。例如:只有Opera支持属性“window.opera”。可以据此识别出Opera。例子:if(window.opera){...action...}
JavaScript 弹窗
可以在JavaScript中创建三种消息框:警告框、确认框、提示框。
警告框(alert()):常用于确保用户可以得到某些消息。当警告框出现后,用户需要点击确定按钮后才能继续操作。语法:window.alert("text") ; 这个方法可以不带上window前缀,直接使用alert()方法。
确认框(confirm()):确认框常用于验证是否接受用户操作。当确认框弹出时,用户可以点击“确认” 或者 “取消”来确定用户操作。当点击“确认”,确认框返回true,如果点击“取消”,确认框返回false。语法:window.confirm()方法可以不带上window对象,直接使用confirm()方法。
提示框(prompt()):提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操作。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为null。
语法:window.prompt("text","defaultvalue") ; 这个方法可以不带上window前缀,直接使用prompt()方法。
var person = prompt("请输入你的名字");
if(person!=null$$person.trim().length()>0){
var x = "你好" + person + "!今天感觉如何?" ;
document.getElementById("demo").innerHTML = x ;
}
换行
弹窗使用反斜杠+n (\n)来设置换行。
alert("Hello \nHow are you?")