BOM 浏览器对象 一、浏览器本身就自己有一些对象，不用创建就可以使用 window(当前浏览器窗体) 属性： status opener closed parent top 方法： alert(); confirm(); setInterval(); clearInterval(); setTimeout();//只执行一次 clearTimeOut(); open();//打开一个新窗体 a链接也可以跳转打开新窗体，两者的区别是：window的open打开的窗体是有联系的，a链接的是没有任何关系的 closed 返回指定窗体是否是关闭的 document frames location history screen ... [window.]成员 document.write(); 本身window open可以弹出子窗体 frams多个窗体
<html> <head> </head> <body> <a href="www.baiyu.com" onclick="return confirm('你确定要删除吗？')">删除</a> </body> </html>
<html> <!-- 砰砰砰 游戏--> <head> </head> <body onkeydown="js()"> <div id="one" style="position:absolute; top:0px; left:0px; 100px; height:80px; background:red;"> </div> <script> var sx=5; var sy=5; var top_1=0; var left_1=0; var height_1=document.body.clientHeight; var width_1=document.body.clientWidth; var one=document.getElementById("one"); function sa(){ if(top_1>=(height_1-one.offsetHeight) || top_1<0){ sy=-1*sy; } if(left_1>=(width_1-one.offsetWidth) || left_1<0){ sx=-1*sx; } top_1+=sy; left_1+=sx; one.style.top=top_1; one.style.left=left_1; } function js(){ sx=sx*2; sy=sy*2; } var dt=setInterval("sa()",50); one.onmouseover=function(){ clearInterval(dt); } one.onmouseout=function(){ dt=setInterval("sa()",50); } </script> </body> </html>
<html> <head> </head> <body onunload="clo()"> <!--<a href="01.html" target="_blank">新</a>--> <script> var subw=window.open("04.html","_blank","top=300,left=300,width=200,height=200"); /* 设置子窗口属性使用逗号隔开 父窗口操作子窗口使用的是子窗口名 */ function show(obj){ subw.document.body.bgColor=obj.value; } function ss(){ window.document.title="guodaxia"; } //closed返回指定窗体是否是关闭的 function clo(){ if(!subw.closed){ subw.close(); } } </script> <input type="button" onclick="show(this)" value="red"><br/> <input type="button" onclick="show(this)" value="green"><br/> <input type="button" onclick="show(this)" value="yellow"><br/> <input type="button" onclick="show(this)" value="blue"><br/> <input type="button" onclick="show(this)" value="#ff00ff"><br/> </body> </html> <html> <head> </head> <body> <script> /* 子窗口中有一个opener属性，代表父窗口对象 */ function show(obj){ opener.document.body.bgColor=obj.value; } opener.ss();//子窗口调用父窗口方法 </script> <input type="button" onclick="show(this)" value="red"><br/> <input type="button" onclick="show(this)" value="green"><br/> <input type="button" onclick="show(this)" value="yellow"><br/> <input type="button" onclick="show(this)" value="blue"><br/> <input type="button" onclick="show(this)" value="#ff00ff"><br/> </body> </html>
<html> <head> <style type="text/css"> frame{ border:1px solid red; } </style> </head> <frameset rows="100,*"> <frame name="top" /> <frameset cols="150,*"> <frame name="menu" src="menu.html"/> <frame name="main" /> </frameset> </frameset> </html> <html> <head> </head> <body> <input type="button" onclick="document.body.bgColor='yellow'" value="改自己的"/> <input type="button" onclick="window.parent.parent.frames[0].document.body.bgColor='red'" value="改上面的"/> <!-- <input type="button" onclick="window.parent.parent.frames[2].document.body.bgColor='blue'" value="改右边的"/> --> <input type="button" onclick="window.top.frames['main'].document.body.bgColor='blue'" value="改右边的"/> </body> <script> /* 想要改变其他窗口就需要获取其他窗口的window对象，如何获取其他窗口的window对象呢？ 我们前面在使用父子窗口的时候，子窗口是可以获取得到父窗口的，使用的是opener，父窗口获取子窗口使用的是window.子窗口名 使用frame，其实有点类型于子父窗口 注意在frame中获取父窗口使用的是parent属性，一般都是获取到顶层窗口再寻找指定窗口设置。获取到指定窗口后窗口下标是0开始，排序是从左往右，从上往下。如果只是获取上一个窗口操作可能发生错误。 一直找最外层窗口有点麻烦，我们可以使用top属性获取最外层的窗口对象，然后使用它的frames属性获取frames对象数组 */ </script> </html>
windows对象中的常用对象属性 document location html跳转： <meta http-equiv="refresh" content="3">三秒刷新一次 <meta http-equiv="refresh" content="3;url="http://www.baidu.com">三秒刷新跳转到指定页面 js跳转 window.navigate(url);//重定向 location.href='url'; location.replace('url); history back() go(i) i表示向上返回的步数,i是负数 screen clipboardData剪切板对象 setData(数据类型字符串，数据对象);
<html> <head> <!--<meta http-equiv="refresh" content="3;02.html">--> <meta http-equiv="refresh" content="3;url=02.html"> </head> <body> </body> <script> document.write(new Date()); </script> </html> <html> <head> </head> <body> 12131 </body> <script> setTimeout(function(){ //window.navigate("01.html");火符IE不兼容 //window.location.href="01.html"; //location="01.html";//这样简写也可以 location.replace("01.html");//这样会替换掉原来的链接，无法后退 location.reload();//重新加载 },3000); </script> </html>
<html> <head></head> <body> <a href="two.html">向下</a> </body> </html> <html> <head></head> <body> <a href="javascript:history.go(-1);">向上一步</a> <a href="javascript:history.go(-2);">向上两步</a> </body> </html> <html> <head></head> <body> <a href="three.html">向下</a> <a href="javascript:history.back()">向上一步</a> </body> </html>
<html> <head></head> <body> </body> <script> with(document){ write("您的屏幕显示设定值如下：<p>"); write("屏幕的实际高度为"+screen.availHeight+"<br/>"); write("屏幕的实际宽度为"+screen.availWidth+"<br/>"); write("屏幕的色盘深度为"+screen.colorDepth+"<br/>"); write("屏幕区域的高度为"+screen.height+"<br/>"); write("屏幕区域的宽度为"+screen.width); } </script> </html>
<html> <head> <!-- 复制到粘贴板 --> </head> <body> <!--都没成功 <a href="javascript:window.external.AddFavorite('07.html','07学习')">收藏</a> <a href="javascript:this.setHomePage('07.html');">设为首页</a> <div id="one"> --> aaaaaaaaaaaaaaaaaaaaaaa<br/> bbbbbbbbbbbbbbbbbbbbbbb<br/> ccccccccccccccccccccccc<br/> ddddddddddddddddddddddd<br/> eeeeeeeeeeeeeeeeeeeeeee<br/> </div> <input type="button" onclick="copyc()" value="复制文本内容"/> </body> <script> var one=document.getElementById("one"); function copyc(){ var content=one.innerText; window.clipboardData.setData("Text",content); } </script> </html>