BOM

BOM:

浏览器对象模型BOM,提供了访问浏览器的接口。这些功能大多和网页内容无关,多年来,由于缺乏规范导致BOM中的不同方法在不同浏览器中的实现有所差异,直到html5,才将BOM的主要方面纳入规范。

BOM常用的特性包括:

一、window对象

window对象在浏览器中具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览器窗口的一个接口。

1.获取窗口相对于屏幕左上角的位置

//获取窗口相对于屏幕左上角的位置varleftPos=(typeofwindow.screenLeft==='number')?window.screenLeft:window:screenX;vartopPos=(typeofwindow.screenLeft==='number')?window.screenTop:window:screenY;

需要注意的一点是,在IE,opera中,screenTop保存的是页面可见区域距离屏幕左侧的距离,而chrome,firefox,safari中,screenTop/screenY保存的则是整个浏览器区域距离屏幕左侧的距离。也就是说,二者差了一个浏览器工具栏的像素高度。

2,移动窗口,调整窗口大小

window.moveTo(0,0)//移动到指定坐标,与原来窗口在什么位置无关

window.moveBy(100,0)//在原有的基础之上移动窗口,若这里原来为left:100,top:200;此时的位置是:left:200;top:200;

// resizeBy();与resizeTo();用法与上面的一样;

window.resizeTo(100,100);

window.resizeBy(100,100);

// 用法与上面的一样;

newWindow.scrollBy(100,100);

newWindow.scrollTo(100,100);

注意,这几个方法在浏览器中很可能会被禁用。

3.获得浏览器页面视口的大小

var   pageWith=document.documentElement.clientWidth||document.body.clientWidth;

var   pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

4.导航和打开窗口

window.open()既可以导航到特定的URL,也可以打开一个新的浏览器窗口,其接收四个参数,①要加载的url,②窗口目标(可以是关键字_self,_parent,_top,_blank),③一个特性字符串(即窗口特征,可以改变打开的新的窗口的样式),以及④一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值(即,是否使用新的地址替换当前的历史记录,true是替换,false是不替换且生成新的记录)。通常只需要传递第一个参数。

注意,在很多浏览器中,都是阻止弹出窗口的。

5.几个时序相关的函数(原来这是BOM的实现,而非ECMAjavascript的实现)

setInterval();

setTimeout();

6.系统对话框,这些对话框外观由操作系统/浏览器设置决定,css不起作用,所以很多时候可能需要自定义对话框

alert():带有一个确定按钮

confirm():带有一个确定和取消按钮

prompt():显示OK和Cancel按钮之外,还会显示一个文本输入域

二、location对象

location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。

location.hash  #contents  返回url中的hash,如果不包含#后面的内容,则返回空字符串,(设置或返回从井号 (#) 开始的 URL(锚)

location.host  www.wrox.com:80  (设置或返回主机名和当前 URL 的端口号

location.port  80  设置或返回当前 URL 的端口号

location.hostname  www.wrox.com  返回服务器名称,(设置或返回当前 URL 的主机名。

location.href  http://www.wrox.com  返回当前加载页面的完整url,(设置或返回完整的 URL。

location.pathname  /index.html  返回url中的目录和文件名,(设置或返回当前 URL 的路径部分。

location.protocol http  返回页面使用的协议,(设置或返回当前 URL 的协议。

location.search  ?q=javascript  返回url中的查询字符串,(设置或返回从问号 (?) 开始的 URL(查询部分))

改变浏览器的位置:

location.href=http://www.baidu.com

如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录,用户不能回到前一个页面。即,用新的文档替换当前文档

location.reload():重置当前页面(重新加载当前文档。),可能从缓存,也可能从服务器;如果强制从服务器取得,传入true参数。

location.assign() 加载新的文档。

三、navigator对象

这个对象代表浏览器实例,其属性很多,但常用的不太多。如下:

navigator.userAgent:用户代理字符串,用于浏览器监测中、返回由客户机发送服务器的 user-agent 头部的值。

navigator.plugins:浏览器插件数组,用于插件监测

navigator.registerContentHandler 注册处理程序,如提供RSS阅读器等在线处理程序。

navigator. appCodeName 返回浏览器的代码名。

navigator.appMinorVersion 返回浏览器的次级版本。

navigator. appName 返回浏览器的名称。

navigator.appVersion 返回浏览器的平台和版本信息。

navigator. browserLanguage 返回当前浏览器的语言。

navigator. cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。

navigator.cpuClass 返回浏览器系统的 CPU 等级。

navigator. onLine 返回指明系统是否处于脱机模式的布尔值。

navigator. platform 返回运行浏览器的操作系统平台。

navigator. systemLanguage 返回 OS 使用的默认语言。

navigator. userLanguage 返回 OS 的自然语言设置。

navigator.Navigator 对象方法

// 方法 描述

navigator. javaEnabled() 规定浏览器是否启用 Java。

navigator. taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。

四、history对象

history对象保存着用户上网的历史记录,使用go()实现在用户的浏览记录中跳转:

// 属性 描述

 length 返回浏览器历史列表中的 URL 数量。

// 方法 描述

 back() 加载 history 列表中的前一个 URL。

 forward() 加载 history 列表中的下一个 URL。

 go() 加载 history 列表中的某个具体页面

             history.go(-1) 等价于history.back()

             history.go(1) 等价于 history.forward()

             history.go(1) //前进两页

             history.go('wrox.com')

五、screen对象

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

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

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

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

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

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

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

screen.height 返回显示屏幕的高度。

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

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

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

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

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值