博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BOM介绍
阅读量:6806 次
发布时间:2019-06-26

本文共 5933 字,大约阅读时间需要 19 分钟。

BOM 浏览器对象模型

BOM (Browser Object Model,浏览器对象模型)提供了通过 JavaScript 访问和控制浏览器窗口(window)、显示器(screen)与浏览历史(history)等对象的接口。

BOM 并非 W3C 的标准,而是在各家浏览器中逐渐形成的一致性接口。

BOM 可以看做是 Browser API 的一部分。

BOM 对象

###1.Window

window 对象代表了一个浏览器窗口(标签)或一个嵌入到页面中的框架(iframe)。参考:WebPlatform/dom/window属性###applicationCache返回 ApplicationCache 对象的引用。###frames以数组形式返回页面中的所有框架。###closed窗口是否被关闭。属性值:1.true 已关闭2.false 未关闭###console返回 Console 对象的引用。###defalutStatus读取或设置状态栏文本。###document返回 Document 对象的只读引用。###frameElement获取当前框架窗口的 frame 引用。###hidden获取窗口是否隐藏。###history返回 History 对象的只读引用。###indexedDB获取 IDBFactory 对象的引用。###innerHeight返回窗口文档显示区的高度,单位为像素。###innerWidth返回窗口文档显示区的宽度,单位为像素。注:innerHeight 和 innerWidth 不包含菜单栏、工具栏及滚动条的尺寸。###length获取窗口中的框架数量。###location返回 Location 对象的引用。###localStorage获取 LocalStorage 对象的引用。###maxConnectionsPerServer获取浏览器与每个服务器之间的最大连接数。###name设置或返回窗口标题。###navigator返回 Navigator 对象的只读引用。###offscreenBuffering设置或获取是否屏幕外渲染。###opener返回创建当前窗口的父窗口的引用。###outerHeight返回窗口的外边缘高度。###outerWidth返回窗口的外边缘宽度。###pageXOffset设置或返回当前页面左侧距离文档显示区左侧的距离。###pageYOffset设置或返回当前页面顶部距文档显示区顶部的距离。###parent返回父窗口的引用。###screen返回 Screen 对象的只读引用。###self返回当前窗口的引用,相当于 window。###status设置或读取状态栏的文本信息。###top返回最顶层父窗口的引用。###screenLeft/screenX返回窗口左边缘距显示器左边缘的距离。###screenTop/screenY返回窗口上边缘距显示器上边缘的距离。###XMLHttpRequest获取 XMLHttpRequest 对象的引用。方法###alert()弹出警告对话框。语法:window.alert("msg");参数:1.msg 警告信息,支持转义字符弹出的警告对话框中会显示警告信息,窗口底部有一个[确定]按钮。###blur()取消当前窗口的焦点。语法:window.blur();###clearInterval()取消定时器。语法:window.clearInterval(interval_id);参数:1.interval_id setInterval() 方法返回的定时器 ID###clearTimeout()取消计时器。语法:window.clearTimeout(timeout_id);参数:1.timeout_id setTimeout() 方法返回的计时器 ID###close()关闭当前窗口。语法:window.close();###confirm()弹出确认对话框。语法:window.confirm("msg");参数:1.msg 提示信息,支持转义字符弹出的确认对话框中会显示提示信息,窗口底部有[确定]和[取消]按钮。返回值:1.true 用户点击了[确定]按钮2.false 用户点击了[取消]按钮###focus()使当前窗口获取焦点。语法:window.focus();###getComputedStyle()获取对象或伪对象的 CSSStyleDeclaration 属性。语法:window.getComputedStyle(elmt,pseudoName);参数:1.elmt 目标对象2.pseudoName 伪元素(可选)返回值:1.CSSStyleDeclaration 对象###getSelection()获取当前的 HTMLSelection 对象。###item()取得对象中指定的子对象。语法:obj.item(name,index);参数:1.name name/id 属性值或索引值(从 0 开始)2.index 索引值###matchMedia()获取 MediaQueryList 对象。语法:obj.matchMedia();###moveBy()根据指定的偏移量移动窗口。语法:window.moveBy(x,y);参数:1.x 横向移动距离(向右为正)2.y 纵向移动距离(向下为正)###moveTo()将窗口移动到指定位置。语法:window.moveTo(x,y);参数:1.x 目标点横坐标2.y 目标点纵坐标###open()打开新的窗口,或修改已存在的窗口。语法:window.open(url,name,features,replace);参数:1.url 要在新窗口中载入的 URL2.name 新窗口的名称(标识符)3.features 新窗口特征列表(参考下面的列表,多个值之间使用 , 分隔)4.replace 是否替换窗口的历史记录条目(true:替换历史记录;false:新建历史记录)####窗口特征列表channelmode ??yes/1 启用no/0 关闭directories ??yes/1 启用no/0 关闭fullscreen ??yes/1 启用no/0 关闭height 文档显示区高度px 像素值width 文档显示区宽度px 像素值left 窗口 x 坐标px 像素值top 窗口 y 坐标px 像素值location ??yes/1 启用no/0 关闭menubar ??yes/1 启用no/0 关闭resizable ??yes/1 启用no/0 关闭scrollbars ??yes/1 启用no/0 关闭status ??yes/1 启用no/0 关闭titlebar ??yes/1 启用no/0 关闭toolbar ??yes/1 启用no/0 关闭####实际表现(Chrome 27):新建标签:window.open();window.open("","id");新标签中打开页面:window.open("http://www.w3school.com.cn");window.open("http://www.w3school.com.cn","id");window.open("http://www.w3school.com.cn","id","");打开新窗口,应用位置和尺寸属性:window.open("http://www.w3school.com.cn","id","left=100,top=100,width=400,height=400");其他属性无效。###print()打印当前页面(等同于执行浏览器的打印功能)。语法:window.print();###prompt()显示输入对话框。语法:window.prompt(text,default);参数:1.text 提示信息,支持转义字符2.default 默认文本弹出的输入对话框中会显示提示信息,窗口中间有一个文本框,底部有[确定]和[取消]按钮。返回值:1.文本框中的文本 用户点击了[确定]按钮2.null 用户点击了[取消]按钮###resizeBy()根据指定的像素调节窗口大小。语法:window.resizeBy(x,y);参数:1.x 窗口宽度变化值2.y 窗口高度变化值x、y 为像素数。当其值 >0 时,窗口增大;< 0 时,窗口缩小。###resizeTo()调节窗口大小到指定的尺寸。语法:window.resizeTo(x,y);参数:1.x 窗口宽度2.y 窗口高度###scrollBy()滚动当前页面。语法:window.scrollBy(x,y);参数:1.x 横向滚动距离(向右为正)2.y 纵向滚动距离(向下为正)###scrollTo()/scroll()滚动当前页面到指定位置。语法:window.scrollTo(x,y);参数:1.x 目标位置横坐标2.y 目标位置纵坐标###setInterval()定义定时器。语法:window.setInterval("func",millisec);参数:1.func 定时调用的函数名称(字符串格式)2.millisec 定时器周期(毫秒)func 函数会在设定的时间间隔后被 重复执行 ,直到使用 clearInterval(interval_id) 清除了该定时器。返回值:interval_id 定时器的 ID###setTimeout()定义计时器。语法:window.setTimeout("func",millisec);参数:1.func 延迟调用的函数名称(字符串格式)2.millisec 计时器时长(毫秒)func 函数会在设定的时间后被 执行一次 ,可以使用 clearTimeout(timeout_id) 清除该计时器。返回值:timeout_id 计时器的 ID

 

###2.Navigator

 

navigator 对象包含了浏览器的相关信息。

属性

plugins

以数组形式返回页面中的嵌入对象。

appCodeName

浏览器代码名称。

appMinorVersion

浏览器的次要版本号。

appName

浏览器名称。

appVersion

包括浏览器的平台及版本信息。

browserLangauge

浏览器的语言。

cookieEnabled

是否已启用 cookie。

cpuClass

CPU 信息。

onLine

在线模式/脱机模式。

platform

运行平台。

systemLangauge

浏览器所在系统使用的语言。

userAnget

用户代理信息。

userLangauge

浏览器所在系统使用的语言。

方法

javaEnabled()

检测浏览器是否启用了 Java。

语法:

navigator.javaEnabled();

返回值:

1.true 已启用

2.false 已禁用

taintEnabled()

检测浏览器是否启用了 data tainting。

语法:

navigator.taintEnabled();

返回值:

1.true 已启用

2.false 已禁用

 

###3.Screen

screen 对象包含了显示器屏幕的相关信息。

属性

###availHeight

返回屏幕窗口显示区域的高度(不高扩任务栏)。

###availWidth

返回屏幕窗口显示区域的宽度(不高扩任务栏)。

###bufferDepth

设置或返回调色板比特值。

###colorDepth

设置或返回设备或缓冲器的调色板比特值。

###deviceXDPI

返回屏幕水平 DPI(每英寸点数)。

###deviceYDPI

返回屏幕垂直 DPI(每英寸点数)。

###fontSmoothingEnabled

返回是否启用了字体平滑。

###height

返回屏幕高度。

###localXDPI

返回屏幕水平 DPI(每英寸点数)。

###localYDPI

返回屏幕垂直 DPI(每英寸点数)。

###pixelDepth

返回屏幕的颜色分辨率。

###updateInterval

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

###width

返回屏幕宽度。

 

 

###4.History

history 对象代表了浏览历史。

属性

###length

历史列表的长度(浏览过的页面数量)。

方法

###back()

加载历史列表中的前一个页面(后退一步)。

语法:

history.back();

###forward()

加载历史列表中的下一个页面(前进一步)。

语法:

history.forward();

###go()

加载历史列表中指定的页面。

语法:

history.go(n);

参数:

1.n 要加载的页面与当前页面的相对距离(0 代表当前页面;-1 代表上一个页面)

 

 

###5.Location

location 对象包含了当前页面 URL 的相关信息。

属性

###hash

设置或返回当前 URL 中的锚信息(从 # 开始的部分)。

###host

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

###hostname

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

###href

设置或返回当前 URL。

###pathname

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

###port

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

###protocol

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

###search

设置或返回当前 URL 中的查询信息(以 ? 开始的部分)。

方法

###assign()

加载新页面。

语法:

location.assigh(url);

参数:

1.url 要加载的页面 URL

###reload()

重新加载当前页面。

语法:

location.reload(force);

参数:

1.force 是否强制重新加载(从服务器重新加载,忽略本地缓存)。true 强制重新加载;false 重新加载。该参数可选,默认为 false

###replace()

加载新页面,并替换当前页面(不产生新的历史记录)。

语法:

location.assigh(url);

参数:

1.url 要加载的页面 URL

转载地址:http://cdtwl.baihongyu.com/

你可能感兴趣的文章
WP7实例篇之土豆搜索器(2)
查看>>
图解Cisco Packet Tracert之利用TFTP来升级路由器的IOS
查看>>
使用SDM配置基于IPsec 加密的GRE隧道
查看>>
Windows远程桌面及其相关问题
查看>>
Spring Security 学习之X.509认证
查看>>
nginx技术(4)nginx地址重写
查看>>
Discuss about PortableRemoteObject.narrow()
查看>>
用SHELL脚本自动化安装Nagios服务器端和客户端的
查看>>
System Center 2012 R2 CM系列之配置configuration manager防火墙设置
查看>>
我的CSS命名规则
查看>>
Configuration Manager 2012 R2系统需求
查看>>
OMF添加在线日志_OCP学习笔记(4)
查看>>
【Vue】详解Vue生命周期
查看>>
MySQL数据库无法启动的简单排错
查看>>
虚拟化技术在企业中的实际应用
查看>>
Unity3D面试题汇总
查看>>
JAVA多线程之中断机制(如何处理中断?)
查看>>
Azure 基础:Blob Storage
查看>>
PLSQL Developer中test window的使用
查看>>
使用RMAN恢复目录(catalog)解析
查看>>