window对象举例
/*window对象是整个JavaScript脚本运行的顶层对象,它的常用属性如下:
document:返回该窗口内装载的HTML文档
location:返回该窗口装载的HTML文档的URL
navigator:返回浏览当前页面的浏览器,包含了一系列浏览器属性,包括名称、版本号和平台等
screen:返回当前浏览器屏蔽对象
history:返回该浏览窗口的历史
提示:这些属性都属于window对象的子对象,每个子对象内部也提供了各自的属性和方法来进行对浏览器的操作。
window对象的常用方法:
(1)alert()、confirm()、prompt():分别用于弹出警告窗口、确认对话框和提示输入对话框
(2)close():关闭窗口
(3)moveBy()、moveTo():移动窗口
(4)resizeBy()、resizeTo():重设窗口大小
(5)scrollBy()、scrollTo():滚动当前窗口的HTML文档
(6)open():打开一个新的浏览器窗口加载新的URL所指向的地址,并可指定一系列的属性,包括隐藏菜单等
(7)setInterval()、clearInterval():设置、删除定时器
更多请参考: http://www.w3school.com.cn/jsref/dom_obj_window.asp
Firefox和Chrome不支持其中(3)、(4)方法。除此之外,可能还有很多存在浏览器兼容性问题。
*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>BOM浏览器对象模型(Brower Object Model)--window对象</title> <script type="text/javascript"> function testConfirm(){ var answer=window.confirm("是否退出?"); if(answer){ window.alert("拜拜"); window.close();//关闭浏览器; }else{ window.alert(":-)"); } } function testPrompt(){ var password=window.prompt("请输入密码", "123abc"); alert(password);//测试prompt返回的是什么--返回的是输入的东西 alert(typeof(password));//测试看返回值的数据类型 } function testMoveBy(){ window.moveBy(50,50); } function testMoveTo(){ window.moveTo(250,250); } function testResizeBy(){ window.resizeBy(50,50); } function testResizeTo(){ window.resizeTo(350,350); } function testScrollBy(){ window.scrollBy(50,50); } function testScrollTo(){ window.scrollTo(350,350); } var count=0; function showTime(){ var date=new Date(); var hour=date.getHours(); if(hour<10){ hour="0"+hour; } var minutes=date.getMinutes(); if(minutes<10){ minutes="0"+minutes; } var seconds=date.getSeconds(); if(seconds<10){ seconds="0"+seconds; } count++; if(count==10){//实现定时器计时10秒就停止 window.clearInterval(t); } document.getElementById("display").innerHTML=hour+":"+minutes+":"+seconds; } var t=window.setInterval("showTime()", 1000); </script> </head> <body> <input type="button" value="confirm" onclick="testConfirm()"><br> <input type="button" value="prompt" onclick="testPrompt()"><br> <input type="button" value="moveBy" onclick="testMoveBy()"><br> <input type="button" value="moveTo" onclick="testMoveTo()"><br> <input type="button" value="resizeBy" onclick="testResizeBy()"><br> <input type="button" value="resizeTo" onclick="testResizeTo()"><br> <input type="button" value="scrollBy" onclick="testScrollBy()"><br> <input type="button" value="scrollTo" onclick="testScrollTo()"><br> <div id="display"></div> </body> </html>
运行结果(定时器计时10秒之后会自动停止):
打开新窗口(window.open)
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法:
window.open([URL], [窗口名称], [参数字符串])
参数说明:
例1:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window.open</title> <script type="text/javascript"> function Wopen(){ window.open('http://www.baidu.com','_blank','height=600,width=400,top=100,left=0'); } </script> </head> <body> <input name="button" type="button" onClick="Wopen()" value="点击我,打开新窗口!" / > </body> </html>
例2:
<!DOCTYPE html> <html lang="en"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function openWindow(){ var message=confirm("是否打开窗口?"); if(message){ // 新窗口打开时弹出确认框,是否打开 var net=prompt("请输入你想要打开的网址","http://www.baidu.com"); // 通过输入对话框,确定打开的网址,默认为 http://www.baidu.com/ window.open(net,'_self','width=400px,height=500px,menubar=no,toolbar=no'); //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。 } else{ alert("不做任何处理"); } } </script> </head> <body> <input type="button" value="新窗口打开网站" onclick="openWindow()" /> </body> </html>
关闭窗口(window.close)
close()关闭窗口
用法:
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例如:关闭新建的窗口。
<script type="text/javascript">
var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close();
</script>
注意:上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。