bom object

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

Browser对象:指BOM提供的多个对象,包括:Window、Navigator、Screen、History、Location等。

其中Window对象为顶层对象,其他对象都为Window对象的子对象。

目录

1. Window 对象:表示浏览器打开的窗口,包括获取焦点、改变滚动条、设置定时器等等。

2. Navigator 对象:包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

3. Screen 对象:包含屏幕信息。如:获取屏幕高度、宽度等等。

4. History 对象:可对当前页的浏览历史进行操作,如:前进、后退等。

5. Location 对象:可对当前页面的URL进行操作,如:导航到新的页面、获取URL信息等。

1. Window 对象
1.1 说明

Window 对象:表示浏览器打开的窗口、标签或者框架(若当前页面里包含多个iframe,会为每个iframe创建Window对象)。

Window对象不会被实例化,调用属性和方法都作为window的静态成员。

调用方式:调用Window对象的成员时,可以省略前面的window。如:window.alert() 可写成 alert() 。

1.2 属性

属性 readonly ApplicationCache applicationCache :返回窗口的应用缓存对象。

属性 readonly boolean closed :返回窗口是否已经关闭。

属性 readonly Console console :返回对Consol对象的引用,对浏览器控制台进行操作。

属性 readonly int devicePixelRatio :返回设备像素比,即当前显示器的物理像素和设备独立像素(dip)的比例。

属性 readonly Document document :返回当前窗口的Document对象。

属性 readonly Element frameElement :若当前window处于一个<iframe>中,此属性返回这个IFrame。若在顶级窗口,返回null。

属性 readonly Window[] frames :返回一个包含窗口内所有的框架的数组。

属性 readonly History history :返回一个History对象。可对当前页的历史进行操作,如:前进、后退等。

属性 readonly long innerHeight :返回当前窗口可显示HTML文档的高度,单位px(像素)。

属性 readonly long innerWidth :返回当前窗口可显示HTML文档的宽度,单位px(像素)。

属性 readonly long length :返回窗口内包含框架的数量,即frames数量。

属性 readonly Location location :返回一个Location对象。可对当前页面的URL进行操作,如:导航到新的页面、获取URL信息等。

属性 readonly LocalStorage localStorage :返回一个键/值对存储的Storage对象,持续到被用户删除。

属性 string name :设置或获取当前窗口的name。

属性 readonly Navigator navigator :返回一个Navigator 对象。包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

属性 Window openner :返回对打开当前窗口的原窗口一个引用。若当前窗口是由另一个窗口打开的, window.opener保留对那个窗口的引用. 如果当前窗口不是由其他窗口打开的,则该属性返回 null。

属性 readonly long outerHeight :返回当前浏览器的总高度,单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

属性 readonly long outerWidth :返回当前浏览器的总宽度,单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

属性 readonly long pageXOffset :返回文档横向滚动的距离,单位px(像素)。

属性 readonly long pageYOffset :返回文档纵向滚动的距离,单位px(像素)。

属性 readonly Window parent :返回当前窗口的父级窗口。若当前窗口是顶级窗口,返回当前窗口本身。若当前窗口为一个框架窗口,返回它的父窗口。

属性 readonly Screen screen :返回一个Screen对象。包含屏幕信息。如:获取屏幕高度、宽度等等。

属性 readonly long screenX :返回浏览器在屏幕的X坐标。

属性 readonly long screenY :返回浏览器在屏幕的Y坐标。

属性 readonly long scrollX :返回文档横向滚动的距离,单位px(像素)。与pageXOffset属性一样。

属性 readonly long scrollY :返回文档纵向滚动的距离,单位px(像素)。与pageYOffset属性一样。

属性 readonly Window self :返回一个对当前Window对象的引用。

属性 readonly SessionStorage sessionStorage :返回一个键/值对存储的Storage对象,持续到当前浏览会话结束。

属性 readonly Window top :返回当前窗口的顶级窗口。若当前窗口本身已经是顶级,则返回自身。若当前窗口为一个框架窗口,返回包含它的顶级窗口(parent只是返回父窗口)。

属性 readonly Window window :返回当前窗口Window对象。

1.3 方法

方法 void addEventListener(string eventType,function eventListener) :给窗口注册事件。eventType事件类型,如:click。eventListener:事件触发的函数或对象。

方法 void alert(string msg) :弹出一个包含msg和一个确认按钮的警告框。

方法 string atob(string base64Str) :将一个基于Base64编码的字符串解码为一个字符串。

方法 void blur() :当前窗口移除焦点。

方法 string btoa(string str) :将一个字符串编码为一个Base64编码。

方法 void clearInterval(long intervalHandle) :停止intervalHandle指定的setInterval()。

方法 void clearTimeout(long timeoutHandle) :停止timeoutHandle指定的setTimeout()。

方法 void close() :关闭当前窗口。只能关闭由脚本打开的窗口,如:a元素打开新页面。

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

方法 void focus() :当前窗口获得焦点。

方法 void moveBy(long deltaX, long deltaY) :使open()方法创建的窗口,在本身的位置上,水平移动deltaX个像素,垂直移动deltaY个像素。

方法 void moveTo(long x, long y) :使open()方法创建的窗口,移动到x,y坐标。

方法 Window open(string url, string target, string features, string replace) :创建一个新的窗口。
复制代码

参数:
①url {string} :新窗口加载的url。若没有指定,将使用"about:blank"。
②target {string}  :新窗口的名称。若没有指定,将使用"_black"。注意此值并不是窗口标题。
③features {string} 可选 :表示新窗口的特性,如:窗口功能和工具栏 。 字符串中不能包含任何空白字符,特性之间用逗号分隔开。

返回值:
{Window} 返回新窗口的引用。

复制代码

方法 void print() :调用浏览器的打印按钮。

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

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

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

方法 void scrollBy(long deltaWidth, long deltaHeight) :在当前滚动的基础上,横向滚动deltaWidth像素,纵向滚动deltaHeight像素。

方法 void scrollTo(long width, long height) :横向滚动到width像素距离上,纵向滚动到height像素距离上。

方法 long setInterval(function fn, long time) :每隔一定的周期(毫秒)执行指定函数。

参数:
①fn {function} :需要执行的函数。
②time {long} :设置每隔多少毫秒执行指定的函数。单位:毫秒。

返回值:
{long} 返回一个数字。可以通过调用window.clearInterval()来取消此函数的执行。

方法 long setTimeout(function fn, long time) :在一定的毫秒数后执行指点函数。

参数:
①fn {function} :需要执行的函数。
②time {long} :设置多少毫秒后执行指定的函数。单位:毫秒。

返回值:
{long} 返回一个数字。可以通过调用window.clearTimeout()来取消此函数的执行。

2.Navigator 对象
2.1 说明

Navigator 对象:包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。

调用方式:window.navigator 或者 navigator。

2.2 属性

属性 readonly string appName :返回浏览器的名称。基于 Netscape 的浏览器中,返回的是 "Netscape"。在 IE 中,返回值为 "Microsoft Internet Explorer"。

属性 readonly string appVersion :返回浏览器版本和平台信息。如:某个Chrome版本返回 "5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36"。

属性 readonly Geolocation geolocation :返回一个Geolocation对象,可获取当前的地理信息。

属性 readonly string language :返回浏览器界面语言。简体中文返回:"zh-CN"。

属性 readonly boolean onLine :返回浏览器是否可连接网络。

属性 readonly string platform :返回浏览器所在的系统平台。如:Win32。

属性 readonly string userAgent :返回由客户机发送服务器的 user-agent 头部的值。如:"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36".

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

2.2 方法 

方法 boolean javaEnabled() :返回浏览器是否启用Java。

3. Screen 对象
3.1 介绍

Screen 对象:包含屏幕信息。如:获取屏幕高度、宽度等等。

调用方式:window.screen 或者 screen。

3.2 属性

属性 readonly long availHeight :返回浏览器在屏幕的可用高度,单位px(像素)。可理解为浏览器最大化的高度,一般为屏幕高度减去上下系统任务栏或停靠栏。

属性 readonly long availWidth :返回浏览器在屏幕的可用宽度,单位px(像素)。可理解为浏览器最大化的宽度,一般为屏幕宽度减去左右系统任务栏或停靠栏。

属性 readonly long colorDepth :返回屏幕的颜色深度。颜色深度简单说就是最多支持多少种颜色,。一般是用“位”来描述的。比如BMP格式,则最多可以支持红、绿、蓝各256种,总共24位。所以颜色深度是24。

属性 readonly long height :返回屏幕的高度,单位px(像素)。

属性 readonly long pixelDepth :返回屏幕的色彩深度。

色彩深度计算机图形学领域表示在位图或者视频帧缓冲区中储存1像素的颜色所用的位数,它也称为位/像素(bpp)。
色彩深度越高,可用的颜色就越多。
色彩深度是用“n位颜色”(n-bit colour)来说明的。
若色彩深度是n位,即有2^n种颜色选择,而储存每像素所用的位数就是n。
比如:24位:16,777,216种颜色,真彩色,能提供比肉眼能识别更多的颜色,用于拍摄照片。

属性 readonly long width :返回屏幕的宽度,单位px(像素)。

4. History 对象
4.1 说明

History 对象:可对当前页的浏览历史进行操作,如:前进、后退等。但不能知道浏览了哪些URL。

调用方式:window.history 或者 history。

4.2 属性

属性 readonly long length :返回浏览器历史列表中的 URL 数量。

4.3 方法

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

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

方法 void go(int index) :使当前窗口访问指定的访问过的URL。当前窗口访问过的URL,是存入一个数组。正数表示前进index个(点击"前进"按钮index次),负数表示后退index个(点击"后退"按钮index次)。

5. Location 对象
5.1 说明

Location 对象:可对当前页面的URL进行操作,如:导航到新的页面、获取URL信息等。

调用方式:window.location 或者 location。

5.2 属性

属性 string hash :设置或返回当前页面URL中的的锚部分,包含开头的#符号。

如:www.baidu.com#top
loction.hase; // => 返回#top 

属性 string host :设置或返回当前页面URL的主机名称和端口。

// 页面地址:http://wenku.baidu.com:80/view/abc
location.host; // => 返回 ‘wenku.baidu.com:80‘
location.host = ‘www.baidu.com‘; // 会让当前窗口访问 http://www.baidu.com/view/abc

属性 string hostname :设置或返回当前页面URL的主机名称。

// 页面地址:http://wenku.baidu.com:80/view/abc
location.hostname; // => 返回 ‘wenku.baidu.com‘
location.hostname = ‘www.baidu.com‘; // 会让当前窗口访问 http://www.baidu.com:80/view/abc

属性 string href :设置或返回当前页面完整的URL。若设置时不加协议,设置的字符串只是改变URL最后一个‘/‘之后的字符串。

// 页面地址:http://wenku.baidu.com:80/view/abc
location.href; // => 返回 ‘http://wenku.baidu.com:80/view/abc‘
location.href = ‘www.baidu.com‘; // 不加协议,会让当前窗口访问 http://wenku.baidu.com:80/view/www.baidu.com
location.href = ‘http://www.baidu.com‘; // 会让当前窗口访问 http://www.baidu.com

属性 string pathname :设置或返回当前页面URL的路径部分。

// 页面地址:http://wenku.baidu.com:80/view/abc
location.pathname; // => 返回 ‘/view/abc‘
location.pathname = ‘a.html‘; // 修改路径的值,会让当前窗口访问 http://wenku.baidu.com:80/a.html

属性 string port :设置或返回当前页面URL的端口。若当前URL没有端口,返回一个‘‘(空字符串)。

属性 string protocol :设置或返回当前页面URL的协议,最后面会有个‘:‘冒号。

// 页面地址:http://www.baidu.com
location.protocol; // => 返回 ‘http:‘
location.protocol = ‘https:‘; // 会让当前窗口访问 https://www.baidu.com

属性 string search :设置或返回当前页面URL的查询部分(从问号 (?) 开始的 URL)。

// 页面地址:http://www.baidu.com?id=1&page=1
location.search; // => 返回 ‘?id=1&page=1‘
location.protocol = ‘?id=1&page=1‘; // 会让当前窗口访问 http://www.baidu.com?id=1&page=1
location.protocol = ‘id=1‘; // 省略‘?‘问好,会让当前窗口访问 http://www.baidu.com?id=1

属性 readonly string origin :返回当前页面URL的源。返回格式:协议+主机名+端口;如:https://www.baidu.com

5.3 方法

方法 void assign(string url) :设置当前页面加载指定的url,等同于设置href属性的值为url。

方法 void reload() :重新加载当前页面的URL。可看成为刷新操作。

方法 void replace(string url) :设置当前页面加载指定的url,并在浏览器历史记录中替换掉当前地址,进行"后退"操作不会显示当前访问过的记录。

若已顺序访问过A和B页面。
在B页面,输入:location.replace(‘http://c.html‘); // 访问C页面。
此时页面加载C页面。点击浏览器的"退回"按钮,会退回到A页面。
时间: 2024-10-13 23:28:09

bom object的相关文章

JavaScript知识体系

JavaScript知识版图 Language ECMAScript Browser BOM DOM Other Transmition Ajax.JSON Server-side Node JavaScript纵向生态 应用层 交互逻辑 组件层 定制组件 通用组件 如Datepicker 框架层 jQuery.Angular.React…… 核心层 原生js和底层API 分类依据:什么是编程语言?编程语言就是用于操纵计算机干活的指令.计算机能干什么活?计算机只会干一件事,那就是处理数据.因此编

Concurrent.Thread.js

(function(){ if ( !this.Data || (typeof this.Data != 'object' && typeof this.Data != 'function') ) this.Data = new Object(); if ( this.Data.Stack === undefined ) this.Data.Stack = undefined; with ( function(){ with ( Data ) { return function () {

BOM(Browser Object Model) 浏览器对象模型

JavaScript 实现是由 3 个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM) BOM(Browser Object Model) 浏览器对象模型BOM定义了JavaScript进行操作浏览器的各个功能部件的接口,提供访问文档各个功能部件(如窗口本身.屏幕功能部件.框架.浏览历史记录等)的途径以及操作方法.BOM是JavaScript应用中唯一没有相关标准的部分, ,每种浏览器都有其特有的BOM扩展实现. BOM对象 描述Window JavaSc

(一)、BOM:Browser Object Model

BOM window 打开关闭窗口 窗口大小和窗口位置 ****定时器 (一).BOM:Browser Object Model 浏览器对象模型:用来访问和操作浏览器窗口,使JS有能力与浏览器交互. 专门操作浏览器窗口的API--没有标准,有兼容性问题 浏览器对象模型的主要对象 window:代表整个窗口是BOM的根对象 2个角色:1.代替global称为全局作用域对象  2.封装所有DOM API 和BOM API 以下为window的子对象 1.history:封装当前窗口打开后,成功访问过

BOM (Browser Object Model) 浏览器对象模型

l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存在; var newValue = oldValue; // =>ReferenceError:oldValue is not defined; var newValue = window.oldValue; // =>undefined; 1.window对象的属性和方法window对象有一系列

浏览器对象模型(BOM,Browser Object Model)

本文内容 1.概述 2.windows与document 3.对话框 4.定时调用 5.URL解析与访问历史 6.浏览器和屏幕信息 ★概述 “浏览器对象模型(Browser Object Model,BOM)”是由浏览器实现的可供JavaScript程序调用的一组对象,通过它们,Web开发与设计者使用JavaScript代码可以完成与“控制”浏览器进程相关的许多工作. BOM由一系列相关的对象构成,其中Window对象使整个BOM的核心,其他对象和集合对象都是window对象的属性. BOM中定

javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup--网页超文本应用程

BOM——浏览器对象模型(Browser Object Model)

什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程

BOM—浏览器对象模型(Browser Object Model)

 1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser Object Model) 2,BOM 的组成部分: 1.window对象 每一个子窗口对应的又是一个window对象 2. screen对象 3.location对象 4.history对象 5.Navigator对象 6.定时器 (两种) 7.弹框(三种) 8. document (DOM-文档