您的位置：首页 > Web前端 > JavaScript

JS---BOM

2013-06-23 17:49 190 查看
1 BOM对象

BOM对象说明
Window客户端JS的顶层对象，每当<body>或者<frameset>标签出现，Window对象就会被自动创建
Navigator包含客户端浏览器的信息
Screen包含客户端显示屏的信息
History包含浏览器窗口访问过的URL
Location包含当前URL的信息
Document包含整个HTML文档，可以用来访问页面中的所有元素
2 Window对象

　　2.1 Window对象是客户端JS的最顶层的对象，所有的对象都是它的子对象，即为全局对象

　　2.2 每一个Window对象都是一个独立的浏览器窗口，对于框架页面来说，页面中的每个框架都有一个Window对象

　　2.3 Window对象的属性和方法

Window对象的属性说明
closedboolean值，检查窗口是否关闭
defaultStatus浏览器状态栏中显示的默认文本
status当前浏览器状态栏显示的文本
document对Document对象的引用
frames[]Window对象的数组，代表窗口的各个框架
history代表用户浏览窗口的历史
location代表在窗口中显示的文档的URL，设置该属性可以使浏览器装载一个新的文档
name窗口的名称，可以在<a>标签的target属性使用
opener对打开当前窗口的Window对象的引用
parent如果当前窗口是框架，那么该值是指包含该框架的父级框架，如果当前窗口是独立窗口，该值是self
self自引用属性，是对当前Window对象的引用
top对顶级窗的Window对象的引用
window自引用属性，是当前Window对象的引用，与self属性同义
Window对象的方法说明
alert()/confirm()/prompt()人机交互的接口方法，供用户与浏览器窗口双向信息交流
open()/close()打开/关闭窗口
focus()/blur()请求/放弃键盘焦点
moveBy()/moveTo()移动窗口
print()打印窗口内容
resizeBy()/resizeTo()调整窗口大小，
有一些安全性的攻击，将窗口设置的非常小，

或者将窗口移出屏幕，让用户注意不到，

因此为了防止这种攻击，浏览器会限制不能将窗口移出屏幕或者将窗口设置的非常小

scrollBy()/scrollTo()滚动窗口中显示的文档
setInterval()/clearInterval设置/取消重复调用的函数，指定两次调用之间的间隔
setTimeout()/clearTimeout()设置/取消在指定的若干毫秒后调用一次某个函数
　　2.4 控制弹出窗口open()方法：window.open(url,name,feature,replace)

　　　　url:设置打开窗口中显示的文档的URL，如果缺省或者为””，那么新窗口就不显示任何文档

　　　　name：为新窗口命名。该名称可以作为标签<a>和<form>的target属性值。如果名称为已经存在的窗口的名称，那么open方法就不再创建新的窗口，而只返回对指定窗口的引用，　　　　这种情况，第三个参数将被忽略。

feature：设置新窗口的显示特性，可选参数

replace：设置是否在窗口的浏览历史中给加载到新页面的URL创建一个新条目，还是用它替换浏览历史中的当前条目

open方法的第四个参数只在第二个参数命名的是一个已经存在的窗口时才有用

open方法的返回值是代表新创建的窗口的window对象，window对象的opener属性引用的是打开它的窗口。如果当前窗口是由用户创建的，那它的opener属性就是null

使用open方法打开新窗口后，可以使用close方法关闭窗口，如果在打开窗口内部关闭自身窗口，应该使用window.close();

feature是一个逗号分隔的设置字符串，有如下选项

参数选项值说明
fullscreenyes或者no表示浏览器是否最大化显示，仅限于IE
height数值表示新窗口的高度，不能小于100，
left数值表示新窗口的左坐标，不能是负值
locationyes或者no表示是否在浏览器窗口显示地址栏，对ie有效
但是即使设置为no，火狐会出现只读的地址栏,

menubaryes或者no表示是否在浏览器窗口显示菜单栏，默认是no，对ie有效，对火狐不起作用
resizableyes或者no

表示是否可以通过拖动浏览器窗口的边框改变其大小，默认是no，对ie有效，对火狐不起作用
scrollbarsyes或者no表示如果内容在视口中显示不下，是否允许滚动，默认是no
statusyes或者no是否在浏览器窗口中显示状态栏，默认是no，即使值为yes，火狐也没有状态栏，ie有
toolbaryes或者no是否显示工具栏，默认是no
top数值新窗口的上坐标，不能是负值
width数值表示新窗口的宽度，不能小于100
如果浏览器的内置屏蔽程序阻止了弹出窗口，那么window.open()方法就会返回null，因此将window.open方法封装在一个try-catch语句中，准确检测弹出窗口是否被屏蔽

2.5 框架之间的通信

1 当我们使用Window对象的open方法来创建一个窗口时，新窗口可以利用opener属性访问原窗口，而原窗口通过open方法的返回值访问新创建的窗口。这样窗口之间就可以利用这种关系实现相互控制。

2 使用frameset和frame元素来创建框架集页面，框架之间通过frames、parent和top以及self属性访问窗口中的其他框架。

3 要访问窗口中的某个框架时，可以使用frames[索引]来访问具体框架

4 parent属性来访问当前框架的直接父级窗口

5 top属性引用的始终是它的顶级窗口，

6 self属性始终指向window对象,每个frame都有一个window对象

7 分析一下下面这句话：window.top.getElementById("topFrame").contentWindow.document.getElementById("topFrame_element")

其中window.top可以直接到达顶级窗口，通过getElementById方法获取顶级窗口内的一个id为topFrame的iframe，但是通过getElementById方法获取到的只是DOM，并没有获取到该框架的window对象

所以使用contenetWindow属性来获取该框架的window对象，然后在获取其document对象，最后获取该文档的元素

2.6 在一个框架中可以调用另一个框架中定义的变量和函数

但是应该注意的是虽然在A框架中定义的函数，可以在B框架中调用，但是函数仍然是在定义它的作用域执行的，而不是在调用它的作用域执行的

main.html代码：

<frameset rows="160,*">
<frame src="first.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="second.html" name="leftFrame" />
<frame src="third.html" name="rightFrame" />
</frameset>
</frameset>


first.html代码：

window.name="first";
function getName(){
alert(window.name);
}


　　third.html代码

window.name="third";
parent.parent.frames[0].getName();//first


　　2.7 窗口位置

属性说明
window.screenLeft/window.screenTop表示窗口相对于屏幕左边和上边的位置，

在IE,Opera，Chrome中该属性是指从屏幕的左边和上面到页面可见区域（工具栏与菜单栏不属于可见区域）的距离，

在Safari中，该属性是指整个浏览器窗口相对于屏幕的坐标值

window.screenX/window.screenY火狐，safari和chrome均支持该属性，该属性是指整个浏览器窗口相对于屏幕的坐标值
无法在跨越浏览器的情况下获取窗口左边和上边的精确坐标，但是，如果我们使用moveTo和moveBy方法可以将窗口移动到一个精确的位置，注意的是这个方法在某些浏览器中可能是呗禁用的，且只对最外层的window对象适用

　　2.8 窗口大小

　　　　由于IE没有提高浏览器窗口尺寸的属性，因此，无法在获取到浏览器窗口的大小，但是可以获取页面视口的大小，同时，通过resizeTo和resizeBy方法可以调整浏览器窗口的大小

属性说明
outerWidth/outerHeightSafari和火狐返回的是浏览器窗口的大小，Opera和Chrome返回的是页面视图容器的大小,
innerWidth/innerHeight火狐、Safari、opera、chrome都支持，表示页面视图的大小（减去边框的宽度），
document.documentElement.clientWidth获取页面视口的尺寸信息，在ie6的标准模式下有效，
document.body.clientWidth在ie6的混杂模式下，使用该属性可以获取页面视口的尺寸信息
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth!="number"){
if(document.compatMode=="CSS1Compat"){//标准模式
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeigth;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeigth;
}
}
alert(pageWidth);


3 Navigator对象

3.1 Navigator对象的属性

属性

说明

appName

Web浏览器的名称

appVersion

浏览器的版本号和其他版本信息

userAgent

浏览器在它的USER-AGENT HTTP标题中发送的字符串，包括appName和appVersion等信息

appCodeName

浏览器的代码号

Platform

客户所在的操作系统

3.2 常用的检查浏览器的方法

1 特征检测：根据浏览器是否支持特定的功能来决定操作的方式

用户不关心浏览器的版本，只关心浏览器的执行能力

if(document.getElementsByName){

var a=document.getElementsByName("a");

}else{

var a =document.getElementsByTagName("a");

}


2 字符串检测法

客户端浏览器每次发送http请求时，都会附带一个user-agent的字符串，故可以利用该字符串来识别客户的浏览器的类型

IE 6.0的返回字符串：Mozilla/4.0(compatible:MSIE 6.0;Window NT 5.1)

IE 8.0的返回字符串：Mozilla/4.0(compatible:MSIE 8.0;Window NT 6.1; Trident/4.0)

Opera 9.0的返回字符串：Opera/9.00(Window NT 5.1; U;zh-cn)

　　　　　　　　　火狐：Mozilla/5.0 (Windows NT 6.1; rv:21.0) Gecko/20100101 Firefox/21.0

几种常用浏览器的检测：

var u=navigator.userAgent.toLowerCase();

var info={

ie:/msie/.test(u)&&!/opera/.test(u),//

op:/opera/.test(u),

sa:/version.*safari/.test(u),

ch:/chrome/.test(u),

ff:/gecko/.test(u)&&!/webkit/.test(u)

};

info.ff&&alert("火狐");//火狐


3 检测客户端的操作系统

Window:Win

Macintosh:Mac

UNIX:X11

Linux：X11和Linux

Navigator.userAgent.indexOf("Win")!=-1//是否是window系统


4 检测插件

非IE 使用plugins数组，IE使用ActiveXObject类型，并尝试创建一个特定插件的实例，IE是用COM对象的方式实现插件的，而COM对象使用唯一的标示符来标识，因此要坚持特定的插件，就必须知道COM标识符

function hasPlugin(name){
name=name.toLowerCase();
for(var i=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)!=-1){
return true;
}
}
return false;
}
alert(hasPlugin("Flash"));//火狐返回true，ie返回false
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true
}catch(e){
return false;
}
}
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));//ie返回true，火狐返回false


4 Location和History对象

方位导航是确定当前浏览的URL，由Location对象负责

时间导航是定位用户的浏览历史，由History对象负责

4.1 Location对象

属性

说明

href

当前完整的URL

protocol

协议，http：

host

主机名和端口部分，www.css8.cn:80

hostname

主机名，www.css8.cn

port

端口号，80

pathname

当前URL的路径部分，new/index.html

search

当前URL的查询部分，?id=123&name=yyy

hash

锚部分，#top

方法：

方法

说明

reload

重新装载当前文档

replace

无须创建一个新的历史记录，装载一个新的文档来替换当前文档

4.2 History对象

History对象是一个可读的数组，专门用来记录用户的访问历史记录，但为了包含客户的隐私权，History对象禁止JS访问这些信息，

但是又考虑到开发的需要，History对象允许使用length属性来获取History对象中URL的数量，

允许通过back，forward和go等方法来访问History数组中的URL

方法

说明

back

返回前一个URL

forward

访问下一个URL

go(-/+x)

使用不同的参数向前访问第x个或者向后访问第x个

5 Screen对象---客户的屏幕大小，用来表现客户端的能力，浏览器窗口外部的显示器的信息，下面这几种属性是所有浏览器都支持的

属性

说明

availHeight

屏幕的像素高度减去系统部件高度之后获取的值，不包括任务栏

availWidth

屏幕的像素宽度减去系统部件宽度之后获取的值，不包括Window的快捷方式栏

colorDepth

浏览器分配的颜色数或颜色深度

height

显示浏览器的屏幕高度

width

显示web浏览器的屏幕宽度

window.resizeTo(screen.availWidth,screen.availHeight);
//可以利用screen的某些属性获取到用户屏幕的信息来调整浏览器窗口的大小，占据屏幕的可用空间
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航