目录
前言
第六周有一个需了解的内容,如下
- BOM(浏览器对象模型)
一. 什么是BOM
BOM 是 Browser Object Model,浏览器对象模型。
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
DOM 是为了操作文档出现的接口,那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。
浏览器可以做什么呢?比如跳转到另一个页面、前进、后退等等,程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。
由于BOM的window包含了document,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。
可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。
二. Window
window 也是 BOM 的一个对象,除去编程意义上的“兜底对象”之外,通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。
1. Window对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一。
2. Window子对象
Window的子对象主要有如下几个:
- JavaScript document 对象 对 Document 对象的只读引用
- JavaScript history 对象 对 History 对象的只读引用
- JavaScript location 对象 用于窗口或框架的 Location 对象
- JavaScript navigator 对象 对 Navigator 对象的只读引用
- JavaScript screen 对象 对 Screen 对象的只读引用
- JavaScript frames 对象
3. Window尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的窗口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
4. Window方法
一些Window方法:
- Window open() - 打开新窗口
- Window close() - 关闭当前窗口
- Window moveTo() - 移动当前窗口
- Window resizeTo() - 调整当前窗口的尺寸
基本属性:
属性 | 描述 |
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。 |
三. Screen
window.screen 对象包含有关用户屏幕的信息。
这些信息可以用来了解客户端硬件的基本配置。
- window.screen.width //屏幕宽度
- window.screen.height //屏幕高度
- window.screen.colorDepth //屏幕颜色深度
- window.screen.availWidth //可用宽度(除去任务栏的高度)
- window.screen.availHeight //可用高度(除去任务栏的高度)
四. Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
这种方法既可以用于具有onclick事件的标签,也可以用于满足某些条件进行跳转,特点是方便且灵活。
1. Window.Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
一些实例:
- location.hostname 返回 web 主机的域名 通常等于host,有时会省略前面的www
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
2. Location.Herf
location.href 属性返回当前页面的 URL。
<script>
document.write(location.href);
</script>
输出:如http://www.somewhere.com/pictures/index.htm
3. Window.Location.Pathname
location.pathname 属性返回 URL 的路径名。
<script>
document.write(location.pathname);
</script>
输出:如/pictures/index.htm
4. Window.Location.Assign
location.assign() 方法加载新的文档。
location.assign("http:www.baidu.com"); 同location.href,新地址都会被加到浏览器的历史栈中。
五. History
window.history 对象包含浏览器的历史。
window.history.length 浏览过的页面数
history.back() 在浏览历史里后退一步
history.forward() 在浏览历史里前进一步
history.go(i) 到汗青详细登记单的第i位
i>0进步,i<0撤退退却
六. Navigator
window.navigator 对象包含有关访问者浏览器的信息。
window.navigator.appCodeName //浏览器代码名
window.navigator.appName //浏览器步伐名
window.navigator.appMinorVersion //浏览器补钉版本
window.navigator.cpuClass //cpu类型 x86
window.navigator.platform //操作体系类型 win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客户体系语言 zh-cn简体中文
window.navigator.userLanguage //用户语言,同上
window.navigator.appVersion //浏览器版本(包括 体系版本)
window.navigator.userAgent//用户代理头的字符串表示
window.navigator.onLine //用户否在线
window.navigator.cookieEnabled //浏览器是否撑持cookie
window.navigator.mimeTypes
window.navigator 对象在编写时可不使用 window 这个前缀。
来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
- navigator 数据可被浏览器使用者更改
- 一些浏览器对测试站点会识别错误
- 浏览器无法报告晚于浏览器发布的新操作系统