week 7 in bluemsun

BOM简介

BOM全称 Browser Object Model ，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

Browser 指 BOM 提供的多个对象，包括Window、Navigator、Screen、History、Location等。其中Window对象为顶层对象，其他对象都为Window对象的子对象。

Window对象

• 表示浏览器打开的窗口、标签或者框架。Window对象不会被实例化，调用属性和方法都作为window的静态成员。调用Window对象的成员时，可以省略前面的window。

• 属性

  • 窗口关系与框架

    • top ：返回当前窗口的顶级窗口。若当前窗口本身已经是顶级，则返回自身。若当前窗口为一个框架窗口，返回包含它的顶级窗口

    • parent ：返回当前窗口的父级窗口。若当前窗口是顶级窗口，返回当前窗口本身。若当前窗口为一个框架窗口，返回它的父窗口。

    • self ：返回一个对当前Window对象的引用。

  • 窗口的位置

    • screenX ：返回浏览器在屏幕的X坐标。

    • screenY ：返回浏览器在屏幕的Y坐标。

  • 窗口本身的尺寸

    • outerHeight ：返回当前浏览器的总高度，单位为px。包含工具栏、滚动条、浏览器边框等范围。

    • outerWidth ：返回当前浏览器的总宽度，单位为px。包含工具栏、滚动条、浏览器边框等范围。

  • 页面视图区的大小

    • innerHeight ：返回当前窗口可显示HTML文档的高度，单位为px。

    • innerWidth ：返回当前窗口可显示HTML文档的宽度，单位为px。

• 方法

  • 打开新窗口

    • open(string url, string target, string features) ：创建一个新的窗口，返回新窗口的引用。

  • 定时器

    • setInterval(function fn, long time) ：每隔一定的周期(毫秒)执行指定函数，即间歇调用。

    • setTimeout(function fn, long time) ：在一定的毫秒数后执行指点函数，即超时调用。

  • 对话框

    • alert(string msg) ：弹出一个包含一段信息和一个确认按钮的警告框。

    • confirm(string msg) ：显示带有一段消息以及确认按钮和取消按钮的对话框。点击确认按钮返回true，点击取消按钮返回false。

    • prompt(string msg) ：弹出一个显示一段信息并包含一个确定按钮和取消按钮的输入框。此输入框会阻塞页面，点击确定按钮返回输入的内容，点击取消按钮返回null。

  • 窗口位置移动

    • resizeBy(long deltaWidth, long deltaHeight) ：使open()方法创建的窗口，在本身的位置上，宽度增加deltaWidth个像素，高度增加deltaHeight个像素。

    • resizeTo(long width, long height) ：使open()方法创建的窗口，宽度变为width，高度变为height。

Navigator 对象

• 包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。
• 属性

  • appName ：返回浏览器的名称。

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

  • geolocation ：返回一个Geolocation对象，可获取当前的地理信息。

  • language ：返回浏览器界面语言。

  • onLine ：返回浏览器是否可连接网络。

  • platform ：返回浏览器所在的系统平台。

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

  • serviceWorker ：返回ServiceWorker对象。serviceWorker运行于浏览器后台的一种脚本，它可以无需Web页面或者用户交互就能提供额外的功能。

• 方法

  •  javaEnabled() ：返回浏览器是否启用Java。

Screen 对象

• 包含屏幕信息。
• 属性

  • availHeight ：返回浏览器在屏幕的可用高度，单位为px。可理解为浏览器最大化的高度，一般为屏幕高度减去上下系统任务栏或停靠栏。

  • availWidth ：返回浏览器在屏幕的可用宽度，单位为px。可理解为浏览器最大化的宽度，一般为屏幕宽度减去左右系统任务栏或停靠栏。

  • colorDepth ：返回屏幕的颜色深度。

  • height ：返回屏幕的高度，单位为px。

  • pixelDepth ：返回屏幕的色彩深度。

  • width ：返回屏幕的宽度，单位为px。

History 对象

• 可对当前页的浏览历史进行操作
• 属性
  • length ：返回浏览器历史列表中的 URL 数量。
• 方法
  •  go(int index) ：使当前窗口访问指定的访问过的URL。当前窗口访问过的URL，是存入一个数组。正数表示前进index个(点击"前进"按钮index次)，负数表示后退index个(点击"后退"按钮index次)。

  • back() ：当前所属窗口访问上一个访问过的URL。等同于浏览器的"后退"按钮，也等同于history.go(-1)。

  • forward() ：当前所属窗口访问下一个访问过的URL。等同于浏览器的"前进"按钮，也等同于history.go(1)。

 Location 对象

• 可对当前页面的URL进行操作
• 属性
  • hash ：设置或返回当前页面URL中的的锚部分，包含开头的#符号。
  • host ：设置或返回当前页面URL的主机名称和端口。
  • hostname ：设置或返回当前页面URL的主机名称。
  • href ：设置或返回当前页面完整的URL。若设置时不加协议，设置的字符串只是改变URL最后一个'/'之后的字符串。
  • pathname ：设置或返回当前页面URL的路径部分。
  • port ：设置或返回当前页面URL的端口。若当前URL没有端口，返回一个''(空字符串)。
  • protocol ：设置或返回当前页面URL的协议，最后面会有个':'冒号。
  • search ：设置或返回当前页面URL的查询部分(从问号 (?) 开始的 URL)。
  • origin ：返回当前页面URL的源。返回格式：协议+主机名+端口。
• 方法
  • assign(string url) ：设置当前页面加载指定的url，等同于设置href属性的值为url。
  • reload() ：重新加载当前页面的URL。可看成为刷新操作。
  • replace(string url) ：设置当前页面加载指定的url，并在浏览器历史记录中替换掉当前地址，进行"后退"操作不会显示当前访问过的记录。