目录
BOM模型，即浏览器对象模型，JavaScript将浏览器的各个部分封装成为对象。
1. Window对象
window对象，表示浏览器窗口对象。
所有JavaScript全局对象、全局函数以及变量都是window对象的成员。
-
1.1 Window尺寸
- 确定浏览器窗口尺寸（不包括工具栏和滚动条）的三种方法
- 于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
- document.body.clientHeight
- document.body.clientWidth
- 于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- 确定浏览器窗口尺寸（不包括工具栏和滚动条）的三种方法
-
1.2 其他方法
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
- 移动窗口位置方法与调整窗口方法有可能被浏览器禁用
- window.setInterval() - 定时器，每隔多少毫秒后执行任务
- window.setTimeout() - 定时器，多少秒后执行一次任务
- window.confirm() - 确认提示框
- window.alert() - 消息对话框
- window.prompt() - 显示一份提示对话框，带有一条消息和一个输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
<script>
function testOpen(){
window.open("图片.html","_blank","width:200px;height:300px");
}
var id;
function testInterval(){
id = window.setInterval("testOpen()",5000) ;
}
function testInterval(){
clearInterval(id);
}
var tid;
function testTimeout(){
tid=window.setTimeout("testOpen()",3000);
}
function testClearTimeout(){
clearTimeout(toId) ;
}
//确认框
function testConfirm(){
var flag = window.confirm("确认删除吗?一旦删除,数据不可恢复");
if(flag){
alert("正在删除中....")
}else{
alert("取消该操作") ;
}
}
function testPrompt(){
var flag = prompt("请输入动态密令") ;
if(flag){
alert("正在支付..");
}else{
alert("密码错误,请重新输入") ;
}
}
</script>
</head>
<body>
<input type="button" value="testOpen" onclick="testOpen()" /><br />
<input type="button" value="testInterval" onclick="testInterval()"/><br />
<input type="button" value="testClearInterval" onclick="testClearInterval()"/><br />
<input type="button" value="testTimeout" onclick="testTiemOut()"/><br />
<input type="button" value="testClearTimeout" onclick="testClearTimeout()"/><br />
<input type="button" value="testConfirm" onclick="testConfirm()" /><br />
<input type="button" value="testPrompt" onclick="testPrompt()" />
</body>
</html>2. Location对象
location对象（地址栏对象），用于获取当前页面的地址，并将浏览器重定向至新的页面。
-
常用属性
- loction.herf ：跳转页面，返回当前页面的URL
- loction.reload：重新进入当前页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script>
function href(){
window.location.href="window对象.html";
}
//定时刷新
//reload()+setInterval()
function reload(){
//编写时刻不使用window前缀
location.reload();
}
window.setInterval("reload()",2000);
</script>
</head>
<body>
<!--超链接跳转-->
<a href="window对象.html">超链接</a><hr />
<input type="button" value="href" onclick="href()" /><br />
<input type="button" value="reload" onclick="reload()" />
</body>
</html>3. History对象
history对象（历史记录对象）用于保护用户隐私，限制JavaScript访问对象的方法。
- 常用方法
- history.back()：加载历史列表中的前一个URL（类似于后退）
- history.forward()：加载历史列表中的下一个URL（类似于前进）
- history.go(1)：类似于history.forward()
- history.go(-1)：类似于history.back()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
<script>
function forward(){
// window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="history对象目标页面.html">超链接</a><br />
<input type="button" value="forward" onclick="forward()"; />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象目标页面</title>
<script>
function back(){
// window.history.back();
window.history.go(-1);
}
</script>
</head>
<body>
目标页面<br />
<input type="button" value="back" onclick="back()" />
</body>
</html>4. Screen对象
屏幕对象
- 常用属性
- screen.height：获取垂直的屏幕分辨率
- screen.availHeight：除去任务栏的高度（屏幕分辨率）
- screen.width：获取水平的屏幕分辨率
- screen.availWidth：除去任务栏的宽度（屏幕分辨率）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>screen对象</title>
<script>
document.write("height:"+screen.height+"<br />");
document.write("availHeight:"+screen.availHeight+"<br />");
document.write("width:"+screen.width+"<br />");
document.write("availWidth:"+screen.availWidth+"<br />");
</script>
</head>
<body>
</body>
</html>