JS基础9-BOM常用对象（window和history）
一、简介
BOM对象，通常称为浏览器对象模型（Brower Object Model），它是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen等。
二、Window对象
是整个JavaScript脚本运行的顶层对象，它的常用属性如下：
|
document |
返回该窗口内装载的HTML文档 |
|
location |
返回该窗口装载的HTML文档的URL |
|
navigator |
返回浏览当前页面的浏览器，包含了一系列的浏览器属性，包括名称、版本号和平台等。 |
|
screen |
返回当前浏览者屏幕对象 |
|
history |
返回该浏览窗口的历史 |
注：这些属性都是属于window对象的子对象，每个子对象内部也提供了各自的属性和方法来进行对浏览器的操作。
window对象的常用方法：
|
alert()、confirm()、prompt() |
分别用于弹出警告窗口、确认对话框和提示输入对话框。 |
|
close() |
关闭窗口 |
|
moveBy()、moveTo() |
移动窗口（在谷歌浏览器不兼容） |
|
resizeBy()、resizeTo() |
重设窗口大小（在谷歌浏览器不兼容） |
|
scrollBy()、scrollTo() |
滚动当前窗口的HTML文档 |
|
open() |
打开一个新的浏览器窗口加载新的URL所指向的地址，并可指定一系列新的属性，包括隐藏菜单等。 |
|
setInterval()、clearInteral() |
设置、删除定时器 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>BOM</title> <script type="text/javascript"> // function testalert(){ // window.alert("这是alert()"); // } // function testconfirm(){ // var a=window.confirm("是否退出"); // alert(a); // if(a==true){ // alert("拜拜"); // }else { // alert(":-)"); // } // } function testprompt(){ var b=window.prompt("请输入你的姓名:"); if(b!==null){ alert(b); }else{ alert("你点了取消按钮"); } } function testmoveBy(){ window.moveBy(50,50);//移动窗口的偏移量 } function testmoveTo(){ window.moveTo(150,150);//移动窗口的便宜位置 } function testresizeBy(){ window.resizeBy(50,50);//重设浏览器窗口大小的偏移量 } function testresizeTo(){ window.resizeTo(150,150);//重设浏览器窗口的大小位置 } function testopen(){ window.open("https://www.baidu.com/","baidu","left=20,top=50,width=300,height=500,location=no,toolbar=no,status=no,resizable=no") } function watch(){ var d=new Date(); //创建一个获取系统时间的Date对象 var h=d.getHours();//获取系统时间的小时 var m=d.getMinutes();//获取系统时间的分钟 var s=d.getSeconds();//获取系统时间的秒 //document.write(h+":"+m+":"+s); document.getElementById('time').innerHTML=h+":"+m+":"+s; } var timer=setInterval("watch()",1000);//每隔1秒去调用下这个方法 </script> </head> <body> <input type="button" value="alert" onClick="testalert()"> <input type="button" value="confirm" onClick="testconfirm()"> <input type="button" value="prompt" onClick="testprompt()"> <input type="button" value="moveBy" onClick="testmoveBy()"> <input type="button" value="moveTo" onClick="testmoveTo()"> <input type="button" value="resizeBy" onClick="testresizeBy()"> <input type="button" value="resizeTo" onClick="testresizeTo()"> <input type="button" value="open" onClick="testopen()"> <div id="time"> </div> </body> </html>
三、history对象
|
back() |
后退到上一个浏览的页面，如果该页面是第一个打开的，则无效果 |
|
forward() |
前进到下一个浏览页面，如果该页面是第一个打开的，则无效果 |
|
go(intValue) |
该方法可制定前进或后退多少个页面，正则进，负则退 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个javascript程序</title>
</head>
<body>
第一个页面<br>
<a href="page2.html">下一页</a>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个javascript程序</title>
</head>
<body>
第二个页面<br>
<a href="page3.html">下一页</a>
<!--
<a href="javascript:history.back()">后退</a><br>
<a href="javascript:history.forward()">前进</a>
-->
<a href="javascript:history.go(-1)">后退</a><br>
<a href="javascript:history.go(1)">前进</a>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个javascript程序</title>
<script type="text/javascript">
</script>
</head>
<body>
第三个页面<br>
<a href="javascript:history.back()">上一页</a>
</body>
</html>
