BOM浏览器对象

时间:2021-01-28 01:34:14
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>

confirm

<html>
<!-- 砰砰砰 游戏-->
<head> </head> <body onkeydown="js()">
<div id="one" style="position:absolute; top:0px; left:0px; width: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>

open父子窗口

<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>

framms控制

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>

history向上与向下

<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>

复制文本到粘贴栏