浏览器对象模型 BOM
基本的BOM体系结构:
一、 window对象
window对象是BOM对象的核心。所有对象和集合都以某种方式回接到window对象。
alert(window.document === document); true
window对象表示整个浏览器窗口。如果页面使用框架集合,每个框架都由它自己的window对象表示,存放在frames集合中。
window.frames[0] window.frames[“name”] 也可以直接用框架的名字。如window.leftframe。不过用frames集合更常用。
top对象指向的都是最顶层的框架。top.frames[0]
由于window对象是整个BOM对象的中心,所以不需要明确引用它。window.frames[0]可以写成frames[0]。
parent对象
Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口,而不仅仅是隐式地引用它时,可以使用这两个属性。
要引用窗口中的一个框架,可以使用如下语法:
frame[i] //当前窗口的框架
self.frame[i] //当前窗口的框架
w.frame[i] //窗口 w 的框架
要引用一个框架的父窗口(或父框架),可以使用下面的语法:
parent //当前窗口的父窗口
self.parent //当前窗口的父窗口
w.parent //窗口 w 的父窗口
要从顶层窗口含有的任何一个框架中引用它,可以使用如下语法:
top //当前框架的顶层窗口
self.top //当前框架的顶层窗口
f.top //框架 f 的顶层窗口
新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时,应把 open() 调用的返回值存储在一个变量中,然后使用那个变量来引用新窗口。新窗口的opener 属性反过来引用了打开它的那个窗口。
以下内容在火狐、谷歌、IE、opera、safari浏览器下测试(除IE外均用最新版本测试)
属性
作用
浏览器兼容性及说明
window对象
集合
frames
页面使用的框架的集合
属性
closed
返回窗口是否已被关闭。(true、false)
screenLeft
screenTop
浏览器窗口的位置
IE
screenX
screenY
浏览器窗口的位置
IE除外、opera有问题
innerWidth
innerHeight
浏览器窗口可以显示网页内容的区域(即:不包括标签栏、导航栏等)的高度、宽度
IE除外
outerWidth
outerHeight
浏览器窗口 (即:包括标签栏、导航栏等)的高度、宽度
IE除外
status
并不是在所有浏览器上都可以,现在多说浏览器需要用户手动启用设置。
defaultStatus
name
设置或返回窗口的名称
opener
返回对创建此窗口的窗口的引用。
方法
open()
打开新的窗口(现代浏览器大多会拦截弹出窗口)
该方法接受四个参数,url,新窗口的名字(为目标所用)、特性字符串(特性字符串使用都好分割的设置列表,具体参看手册)和说明是否用新载入的页面替换当前载入的页面的Bolean值。
var dxk = window.open("http://www.baidu.com/", "", "left=10px, top=20px, width=400px, resizable=no, toolbar=no");
dxk.close();
close()
关闭窗口,可以关闭创建的也可以关闭自身。
setTimeout()
接受两个参数,要执行的代码和在执行他之前要等待的毫秒数。第一个参数可以是代码传(与eval()函数的参数相同),也可以是函数指针。
setTimeout(hello, 1000);
setTimeout(‘hello(“wuhui”)’,1000);
区别:第二种有引号可以加参数。
clearTimeout()
setInterval()
clearInterval()
moveBy(x,y)
不用写单位值,它的单位是像素
moveTo(x,y)
resizeBy(x,y)
resizeTo(x,y)
不能使用负数
alert()
confirm()
prompt()
blur()
焦点从顶层窗口移开
focus()
焦点给予一个窗口
createPopup()
var p = window.createPopup();
var pbody = p.document.body; pbody.style.backgroundColor = "red"; pbody.style.border = "solid black 1px";
pbody.innerHTML = "这是一个 pop-up!在 pop-up 外面点击,即可关闭它!";
p.show(150, 150, 200, 50, document.body);
仅IE
print()
打印当前窗口的内容
history对象
属性
length
方法
go()
back()
forward()
document对象
alert(window.document === document); true这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象(从BOM角度看,document对象由一系列集合构成,这些集合可以访问文 档的各个部分,并提供页面自身的消息。)
集合
all
提供对文档中所有 HTML 元素的访问
仅IE支持document.all
但是测试document.all.length是也发现只有firefox不支持document.all.length
anchors
页面中所有锚的集合(由<a name=”wuhui”></a>表示)
applets
所有applet的集合
embeds
所有嵌入式对象的集合(由<embed />标签表示)
forms
所有表单的集合
document.forms["wuhui"]["name"].value;
document.forms[0][0].value;
images
所有图像的集合
可以用document.images[0]或者document.images[“name”](也就是img标签的name属性值)访问图像
document.images[0].src
links
所有Area 和 Link 对象的集合(由<a href = http://www.dxk.com/>杜晓孔</a>表示)
注意锚和链接的区别
属性
title
可读可写。
top.document.title = “wuhui”;
URL
返回当前文档的 URL。
IE可读可写,其它浏览器只读。
domain
返回当前文档的域名。
referrer
返回载入当前文档的文档的 URL。(可用于统计访问来源,同样也可以用服务器端技术实现)
lastModified
最后修改页面的日期(同样也可以用服务器端技术实现)
cookie
方法
write()
writeln()
这两个方法都会把字符的内容串插入到调用它们的位置。(必须在完全载入页面之前调用此方法,如果在页面载入后调用,它将抹去页面的内容,显示指定的内容)
参数为要写入文档的字符串
var oNewWin = window.open("about:blank", "newwindow", "height=150,width=300,top=10,left=10,resizable=no");
oNewWin.document.open();
oNewWin.document.write("<html><head><title>New Window</title></head>");
oNewWin.document.write("<body>This is a new window!</body></html>");
oNewWin.document.close();
open()
close()
location对象
BOM对象中最有用的对象之一是location对象,它是window对象和document对象的属性
属性
hash
例子:1.http://www.baidu.com/s?wd=js
host
hostname
href
pathname
port
protocol
search
方法
assign()
加载一个新的文档
replace()
它与location.href不太一样,location.href就好像是用户点击了某个链接,于是浏览器加载一个新的页面,并且产生了一条历史记录。但是replace(),新页面会覆盖窗口历史记录当前页面的条目(也就是用新的文档替换当前文档)。
reload()
参数为true或false,重新加载当前页面。reload方法有两种模式,参数为false或者省略不写则从缓存中加载数据,如果参数为true则从服务器端载入。
screen对象
属性
availWidth
返回显示屏幕的宽度 (除 Windows 任务栏之外)。
availHeight
返回显示屏幕的高度 (除 Windows 任务栏之外)。
width
返回显示器屏幕的宽度。
height
返回显示屏幕的高度。
Navigator对象
cookieEnabled
返回指明浏览器中是否启用 cookie 的布尔值。
platform
返回运行浏览器的操作系统平台。
userAgent
返回由客户机发送服务器的 user-agent 头部的值。
appName
返回浏览器的名称。(不建议使用)