Useful Information Note

浏览器对象模型 BOM

访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model)。

BOM整体对象图。

BOM整体对象图


核心是window对象;

以下有特殊双重身份:

window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;

document对象既是BOM顶级对象的一个属性,也是DOM模型中的顶级对象

location对象既是window对象的属性,同时也是document对象的属性。

window顶层对象


1.2.2 window作为顶层对象的主要方法:

方法名 说明
打开新窗口 open() 返回新打开窗口的引用,利用该引用可以继续操作该新窗口
窗口移动到的位置 moveTo(x,y) x和y表示新位置的x和y坐标值     只适用于最外层window对象
窗口移动的尺寸 moveBy(x,y) x和y表示在水平和垂直方向上移动的像素数   只适用于最外层window对象
窗口宽高尺寸 resizeTo(x,y) x和y表示浏览器窗口的新宽度和新高度  只适用于最外层window对象
窗口宽高变化尺寸 resizeBy(x,y) x和y表示浏览器窗口的宽高变化尺寸   只适用于最外层window对象
提示框 alert() 提示框-显示时包含传入的字符串和“确定”按钮
确认框 confirm() 确认框-点击“确认”返回true,点击“取消”返回false
文本输入框 prompt() “确认”按钮(返回文本输入域的内容)、“取消”按钮(返回null)和文本输入域。
搜索对话框 find() 等同使用浏览器菜单栏的“查找”命令打开对话框
打印对话框 print() 等同使用浏览器菜单栏的“打印”命令打开对话框
定时器只执行一次 setTimeOut() 参数为:执行函数或代码、执行代码前需要等待的时间(毫秒)
取消一次定时器 clearTimeOut() 参数为setTimeout()的引用
循环执行 setInterval() 参数为:执行函数或代码、循环执行代码的间隔时间(毫秒)
取消循环执行 clearInterval() 参数为setInterval()的引用

兼容性:表示窗口位置的属性有screenLeft、screenTop、screenX、screenY、表示窗口大小的属性有innerWidth、innerHeight、outerWidth、outerHeight,但是它们的具体含义和不同的浏览器密切相关。在处理浏览器差异性建议使用JS框架。 


location对象,导航

location.href = 'url'; // 有历史记录

location.replace = 'url'; // 没有历史记录

location.reload(); // 缓存刷新

location.reload(true); 强制刷新

history对象:历史记录

history.back(); // 后退一个历史记录相当于 history.go(-1);

history.forward(); // 前进一个历史记录相当于 history.go(1);

navigator对象:浏览器信息

navigator对象用来描述浏览器本身,包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.

但是各个浏览器及浏览器的不同版本之间对这个对象的实现也不尽相同.

特性检测:

不建议直接使用navigator的方法或属性进行检测浏览器版本,在使用特定方法时,如果担心兼容性,则可以使用特性检测。

screen对象:窗口信息

screen对象用来表明客户端显示器的能力。多用于测定客户端能力的站点跟踪工具中。

包括浏览器窗口外部的显示器的信息,如像素宽度和高度等,每个浏览器中的screen对象都包含着各不相同的属性。

其中五大浏览器都支持的属性有:

属性 说明
height 屏幕的像素高度
width 屏幕的像素宽度
availHeight 屏幕的像素高度减系统部件高度之后的值
availWidth 屏幕的像素宽度减系统部件宽度之后的值

实例:调整浏览器窗口的大小,使其占据屏幕的可用空间

window.resizeTo(screen.availWidth, screen.availHeight);

document对象

document对象既是BOM顶级对象的一个属性,更是DOM模型中的顶级对象,在DOM中一起总结。


open,打开窗口

window.open(args): // 导航到一个特定的URL,也可以打开新的浏览器窗口
第一个参数: 要加载的URL
第二个参数: 窗口目标
第三个参数: 一个特性字符串[height,width,left,menubar,resizable,scrollbars,status,toolbar,top]
第四个参数: 新页面是否取代浏览器历史记录中当前加载页面的布尔值

// <a href="www.baidu.com" target="topFrame">
// www.baidu.com:<p id="topFrame">text content</p>
Eg:window.open("www.baidu.com","topFrame","height=400,width=400,top=10,left=10,resizable=yes");


window.opener

1.保存着打开它的原始窗口对象。这个属性只在弹出窗口的最外层window对象(top)中有定义,而且指向调用window.open()的窗口或框架。
window.opener == window[true]
2.将opener属性设置为null,就是告诉浏览器新创建的标签页不需要与打开它的标签页通信,因此:可以在独立的进行中运行。标签页一旦切断,将无法恢复


window.close(); // 关闭当前页面【理论上:仅仅限制于:用open方法打开的窗口】
window.closed;// 返回一个布尔值:是否关闭


https://www.cnblogs.com/Peng2014/p/4725524.html

上一篇:JS Date对象常用方法
下一篇:内建对象