HTML BOM Browser对象

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页面。

方法详解

==================================系列文章==========================================

本篇文章:4.1 HTML BOM Browser对象

Web开发之路系列文章

时间: 2024-11-08 15:09:15

HTML BOM Browser对象的相关文章

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

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

BOM浏览器对象

BOM浏览器对象BOM是browser object model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3CBOM最初是Netscape浏览器标准的一部分 window对象:对象表示浏览器中打开的窗口.全局对象 [一.三个弹框]window.

Javascript之BOM(window对象)

摘自Rocky Ren 分享到 Javascript之BOM(window对象) ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域

解决jquery1.9不支持browser对象的问题||TypeError: $.browser is undefined

在插件的源代码里插入如下代码: + ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 (function(jQuery)

javascript Browser 对象

项目刚刚上线了几个版本,终于可以小憩一下了,闲来无事,翻阅了一下runoob,想巩固一下知识,然后在javascript中发现了这么一个目录Browser对象.突然发现自己貌似经常使用这一块的东西,但是貌似了解的不是很全面,没有具体的全面看过.所以专门的查看并实验了一下. Window对象 这个对象有如下属性:(我大致分了一下类别.只是按照自己的理解简单分类.)1. document           对Document对象的只读引用. history               对Histo

JavaScript对象 + Browser 对象 + HTML DOM 对象

JavaScript 对象 Array Boolean Date Math Number String RegExp Global Browser 对象 Window Navigator Screen History Location HTML DOM 对象 Document Anchor Area Base Body Button Canvas Event Form Frame Frameset IFrame Image Input Button Input Checkbox Input Fi

javascript篇:Browser对象

WindowWindow对象表示浏览器打开的窗口.如果文档包含框架(frame或ifame标签),浏览器会为HTML文档创建一个Window对象——window,并为每个框架额外创建一个window对象.在客户端js中,window对象是全局的,所有表达式都在当前环境中计算,可以把窗口的属性作为全局变量来使用. Window对象属性 closed:只读返回窗口是否已经被关闭.当浏览器窗口关闭时,表示该窗口的对象并不会消失,它的closed将会设为true.通常可用于子窗口查询. 1 <html>

实用JS系列——BOM常用对象

背景:  最近在着手项目的时候,意识到自己JS的欠缺.虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子.所以JavaScript的基础还需要再打扎实,也就有了这一系列博客.这一系列更重视实用,理论部分可参看之前博客. BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分.它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM. 由图中可看出,window对象是BOM中所有对象的父对象. 1.window对

BOM浏览器对象模型和API详解

什么是BOMBOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性,告诉线程如何操作对象 全局函数: js基于对象,但也有不封装在对象中的函数. 对话框alert(str)—— 弹出消息对话框(对话框中有一个“确定”按钮)confirm(str)—— 弹出消息对话框(对话框中包含一个“确定”按