首页 > js学习 > js基础知识 > javascript中BOM的window对象的属性
2016
12-16

javascript中BOM的window对象的属性

BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。所以,BOM本身是没有标准的或者还没有哪个组织去标准它。

window对象:BOM的核心对象是window,它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象。

Window 对象属性

属性 描述
closed 返回窗口是否已被关闭。当窗口关闭时为真
defaultStatus 设置或返回窗口底部状态栏中的默认文本。
document 对 Document 对象的只读引用,窗口中当前显示的文档对象
history 对 History 对象的只读引用,保存有窗口最近加载的URL
frames 返回窗口中的框架对象数组
length 设置或返回窗口中的框架数量
location 用于窗口或框架的 Location 对象,当前窗口的URL
name 设置或返回窗口的名称
offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新
navigator(详情请点击) 对 Navigator 对象的只读引用,关浏览器的相关信息
opener 返回对创建此窗口的窗口的引用,打开当前窗口的窗口
parent 返回父窗口,指向包含另一个窗口的窗口(由框架使用)
screen 对 Screen 对象的只读引用,显示屏幕相关信息,如高度、宽度(以像素为单位)
self 返回对当前窗口的引用。等价于 Window 属性,指示当前窗口
status 设置窗口状态栏的文本,描述由用户交互导致的状态栏的临时消息
top 返回最顶层的先辈窗口,包含特定窗口的最顶层窗口(由框架使用)
window 等价于 self 属性,它包含了对窗口自身的引用
screenLeft
screenTop
screenX
screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

相关链接:javascript中BOM的window对象的方法

一、location对象:是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是window对象的属性,也是document对象的属性;所以window.location和document.location等效,都表示当前页面的url地址。

location对象的属性:

hash:设置或返回从井号 (包含#) 开始的 URL(锚)

host:设置或返回主机名和当前 URL 的端口号,80端口不输出。

origin:设置或返回协议和主机名和当前 URL 的端口号,80端口不输出。

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

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

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

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

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

search:置或返回从问号 (包含?) 开始的 URL(查询部分)。

location对象的方法

assign():加载新的文档。跳转到指定页面,与href等效:location.assign('http://www.baidu.com');

reload():重新加载当前文档,有可能从缓存加载

replace():用新的文档替换当前文档,可以避免产生跳转前的历史记录

二、history对象:是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起。

1、history对象的length属性,记录history对象中的记录数,可以通过判断history.length == 0,得到是否有历史记录。

2、history对象的方法

back():前往浏览器历史条目前一个URL,类似后退

forward():前往浏览器历史条目下一个URL,类似前进

go(num):浏览器在history对象中向前或向后,为正数n时,浏览器在历史条目中前进n个url,为负数n时,浏览器在历史条目中后退n个url,为0时刷新当前页面。

三、screen对象:包含有关客户端显示屏幕的信息,没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象

screen 对象的属性:

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

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

bufferDepth:设置或返回调色板的比特深度。

colorDepth:返回目标设备或缓冲器上的调色板的比特深度。

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

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

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

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

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

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

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

pixelDepth:返回显示屏幕的颜色分辨率(比特每像素)。

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

四、窗口的位置

alert(typeof screenLeft);//打印窗口的左上角在屏幕上的 x 坐标,浏览器支持则显示number,不支持的显示undefined

var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;

var topY = (typeof screenTop == 'number') ? screenTop : screenY;

五、窗口页面大小:innerWidth和innerHeight返回浏览器窗口本身的尺寸;outerWidth和outerHeight返回浏览器窗口本身及边框的尺寸(这四个属性IE不支持)。

在Chrome中,innerWidth=outerWidth、innerHeight=outerHeight;

document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面窗口的信息。

var width = window.innerWidth; //这里要加window,避免产生无效

var height = window.innerHeight;

if (typeof width != 'number') { //如果是IE,就使用document

if (document.compatMode == 'CSS1Compat') {

width = document.documentElement.clientWidth;

height = document.documentElement.clientHeight;

} else {

width = document.body.clientWidth; //非标准模式使用body

height = document.body.clientHeight;

}

}

以上方法可以通过不同浏览器取得各自的浏览器窗口页面可视部分的大小。document.compatMode可以确定页面是否处于标准模式,如果返回CSS1Compat即标准模式。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。