BOM

BOM

BOM简介

• 定义： Browser Object Model，定义了操作浏览器的接口

• BOM对象：

  • Window

  • History

  • Navigator

  • Screen

  • Location

  • ……

• 由于浏览器厂商的不同，Bom对象的兼容性极低。一般情况下，我只用其中的部分功能。

BOM五大对象的基本方法

window

• Window 对象表示浏览器中打开的窗口。

• 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

• window方法

  • config('text'); 弹出对话框，点确认返回true，另一个返回false

  • open(url, name, features, repalce); 打开URL指向窗口

  • print(); 打印当前窗口内容

  • prompt('提示文本'); 显示可提示用户输入的对话框

  • scrollTo(x, y) / scroll(x, y); 滚动条滚动到指定位置

  • scrollBy(x, y); 在原来基础上滚动指定距离

  • setInterval(fun, timer); 重复定时器

  • setTimeout(fun, timer); 延迟定时器

• window 属性

  • closed 返回窗口是否关闭

    • consoel.log(windwo.open('http://www.baidu.com')); 打印结果为百度的window，但我们无法看到其属性，因为同源策略的限制

  • document 对 Document 对象的只读引用

    • BOM --> window --> DOM document 所以document和window是从属关系

  • history 对History对象的只读索引

  • innerHeigt / innerWidth 返回窗口的文档区尺寸

  • location 对Location的索引

  • Navigator 对 Navigator 对象的只读引用

  • opener 返回对创建此窗口的窗口的引用。

    • 我们调用window.open() 打开一个网页，该方法返回打开网页的window，假设是bdWindow, 则bgWindow.opener返回我们页面的window

  • pageXOffset / pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 X / y 位置(坐标)

  • Screen 对 Screen 对象的只读引用

Navigator

• Navigator 对象包含有关浏览器的信息。

• Navigator对象属性

  • appCodeName 返回浏览器的代码名。

    • 在所有以 Netscape 代码为基础的浏览器中，它的值是 "Mozilla"。为了兼容起见，在 Microsoft 的浏览器中，它的值也是 "Mozilla"。

  • appMinorVersion 返回浏览器的次级版本。

  • appName 返回浏览器的名称。

    • 区别IE和非IE

  • appVersion 返回浏览器的平台和版本信息。

  • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。

  • onLine 返回指明系统是否处于脱机模式的布尔值。

  • platform 返回运行浏览器的操作系统平台。

  • systemLanguage 返回 OS 使用的默认语言。

  • userAgent 返回由客户机发送服务器的 user-agent 头部的值。

    • 区分两个浏览器，正则截取比较判断

    • appVersion打印信息跟此属性差不多

  • userLanguage 返回 OS 的自然语言设置。

• Navigator 方法

  • javaEnabled() 规定浏览器是否启用 Java。

  • taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。

• 调用方法和属性用小写的navigator

Screen

• Screen 对象包含有关客户端显示屏幕的信息。

• Screen对象 属性

  • availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

  • availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

  • deviceXDPI 返回显示屏幕的每英寸水平点数。

  • deviceYDPI 返回显示屏幕的每英寸垂直点数。

  • fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。

  • height 返回显示屏幕的高度。

  • logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。

  • logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。

  • pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。

  • updateInterval 设置或返回屏幕的刷新率。

  • width 返回显示器屏幕的宽度。

History

• History 对象包含用户（在浏览器窗口中）访问过的 URL。

• History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

• History属性的属性

  • length 返回浏览器历史列表中的 URL 数量。

• History属性的方法

  • back() 加载 history 列表中的前一个 URL。

  • forward() 加载 history 列表中的下一个 URL。

  • go(number|URL) 加载 history 列表中的某个具体页面。

    • 参数为正数index， 则向前跳index页

    • 参数为负数index， 则向后跳index也

    • 参数为url， 去history保存中指定url那一页

Location

• Location 对象包含有关当前 URL 的信息。

• Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

• Location对象 属性

  • hash 设置或返回从井号 (#) 开始的 URL（锚）。

    • 我们可以手动改变hash， location.hash = "hashName"

  • host 设置或返回主机名和当前 URL 的端口号。

  • hostname 设置或返回当前 URL 的主机名。

  • href 设置或返回完整的 URL。

  • pathname 设置或返回当前 URL 的路径部分。

  • port 设置或返回当前 URL 的端口号。

  • protocol 设置或返回当前 URL 的协议。

  • search 设置或返回从问号 (?) 开始的 URL（查询部分）。

• Loation对象 方法

  • assign() 加载新的文档。

  • reload() 重新加载当前文档。

  • replace() 用新的文档替换当前文档。