本文介绍了Browser Object Model (BOM)的基本概念及其常用对象，如Window、Screen、Location等，并详细讲解了如何使用这些对象进行窗口操作、获取浏览器及屏幕尺寸、管理地址等。此外，还介绍了弹窗、Cookie的使用方法以及计时事件的应用。
12 BOM
12.1 常用对象
概念：BOM ：Browser Object Model
常用对象：
Window：窗口，浏览器的窗口
我们定义的全局变量和全局函数都是window对象的属性和方法。
var
a = 1;
function test(){
var
a = 2;
alert(a);
alert(window.a)
}
全局变量是window的属性，全局函数时window的方法。
浏览器body的宽度：window.innerWidth
浏览器body的高度：window.innerHeight
常用的方法：
Open：打开一个新的窗口。要传三个参数：第一个为将要打开窗口的路径；第二个为打开的方式；第三个对于新打开窗口的描述（宽和高等）。
var myWindow = window.open("http://www.baidu.com","_blank","width=400,height=300")
Close：关闭一个窗口。
myWindow.close();
MoveTo:移动一个窗口。以窗口的左上角为坐标起点。
function
removeWin(){
//一个窗口的左上角为移动窗口的坐标
myWindow.moveTo(200,200);
myWindow.focus();
}
Focus：使窗口获得焦点。
resizeTo：改变窗口的大小。
function
resizeWin(){
myWindow.resizeTo(600,700);
myWindow.focus();
}
Screen：屏幕也是window下面的一个对象，在使用的时候可以用window.screen，也可以把window省略掉。
屏幕常用的属性：宽，高；可用宽和可用高（可用高不包括任务栏）
var
scrWidth = window.screen.width;
var scrHeight =
screen.height;
document.write("屏幕的宽为:"+scrWidth
+"屏幕的高为:"+scrHeight+"<br>");
var scrAvaWidth =
screen.availWidth;
var scrAvaHeight =
screen.availHeight;
document.write("屏幕的宽为："+scrAvaWidth
+ "屏幕的高为："+ scrAvaHeight);
Location：地址
常用属性：href:完整路径 port:端口号 pathname:路径名protocol:协议
var
href = location.href;
document.write("完整的路径"+href+"<br>");
var port =
location.port;
document.write("端口号"+port+"<br>");
var path =
location.pathname;
document.write("路径名"+path+"<br>");
var pro =
location.protocol;
document.write("协议"+pro)
常用方法：
打开一个新的路径（窗口）
location.assign("http://www.runoob.com");
刷新：普通刷新和强制刷新
function
reLoadDoc(){
location.reload();//如果传值为true，那么就是强制刷新
}
History：历史记录
记录当前的窗口的历史，可以进行页面的转换。
back:返回上一页
forward：进入下一页
go: 进入确定的哪一页（-1时返回上一个页面）
<body>
<button onclick="goBack()">返回上一页</button>
<button onclick="goForward()">进入下一页</button>
<button onclick="newDoc()">新的页面</button>
<button onclick="goTo()">进去确定的页面</button>
</body>
<script>
function
goBack(){
history.back();
}
function
goForward(){
history.forward();
}
function
newDoc(){
location.assign("http://www.runoob.com")
}
function
goTo(){
history.go(-1);
}
</script>
12.2 弹窗
alert():警告提示框。也是window对象下的方法window可以省略不写。
alert("提示的内容");//警告提示框
prompt（“提示的信息”，“默认值”）：信息提示输入框。也是window对象下的方法，window也可以省略不写
var str = prompt("请输入内容","hello world");//请输入内容就是提示的信息，后面的hello world是默认值。
confirm（“提示的信息”）：确认框。也是window对象下的方法，window也可以省略不写。当点击确定的时候，它的返回值是true，如果点取消，返回false。
var isRight = confirm("是否确定删除");
document.write(typeof (isRight) +"<br>"+ isRight);
12.3 cookie
cookie的作用：在本地浏览器储存数据，常用于记住账号
cookie的组成：
键值对的形势
储存的数据：”uesrId=12345;psd=123;”
有效期：”expires=今天以后的时间”
存储cookie：
按照cookie的格式写好一个字符串 然后将她赋值给document.cookie，浏览器就存了这个cookie。可以存储多个键值对，但是键的名字不能重复。
function
saveCookie(){
var
userId = document.getElementById("userId").value;
var
date = new
Date();
date.setDate(date.getDate()+7);
var
cookieText = "userId="
+ userId+";"+"expires="+date;
document.cookie
= cookieText;
var
psd = document.getElementById("psd").value;
cookieText =
"psd=" + psd+";"+"expires="+date;
document.cookie
= cookieText;
}
获取cookie：
通过document.cookie就能得到浏览器之前存储的cookie，是个字符串。将这个字符串进行解析，得到自己想要的内容。
function
getCookie(){
//获取cookie的内容，比如:userId=1234; psd=11;
var
date = document.cookie;
//拆分cookie,得到数组，
var
result = date.split("; ");
//拆分得到用户信息,得到"1234"
var
userIdDate = result[0].split("=")[1];
var
userId = document.getElementById("userId");
userId.value
= userIdDate ;
//拆分得到用户密码,得到"11"
var
psdDate = result[1].split("=")[1];
var psd =
document.getElementById("psd");
psd.value
= psdDate;
}
清除cookie：
将你存储的cookie的有效期改为过去的某一天，就清除了cookie
function
removeCookie(){
var
date = new
Date();
date.setDate(date.getDate()-7);
var
cookieText = "psd=;expires="
+ date;
document.cookie
= cookieText;
}
12.4 计时事件
setInterval(“函数”，”毫秒数”)：计时器，就是每隔多长时间就调用一次函数。例如时钟的演示：
var
timer = setInterval("getTime()",1000);
function getTime(){
var
date = new
Date();
var
hours = date.getHours();
var
minute = date.getMinutes();
var
second = date.getSeconds();
var
s = hours + ":"+ minute +
":" + second;
var
p1 = document.getElementById("p1");
p1.innerHTML
= s;
}
clearInterval(计时器)：停止一个计时器。
clearInterval(timer);
setTimeout(“函数”,”毫秒数”)：延时器，就是隔了多少时间后调用一次函数。
var timer =setTimeout("alarmClock()",3000);
function
alarmClock(){
var
p1 = document.getElementById("p1");
p1.innerHTML
= "";
}
扫一扫
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
