BOM 对象操作浏览器窗口的API

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天学习BOM对象

1. BOM: 操作浏览器窗口的API

window对象：

1. 替代ECMAScript中的Global对象，充当全局对象

2. 封装浏览器软件或窗口的属性和功能——》BOM

1. 打开新链接的方式：4种：

1. 在当前窗口打开，可后退

html： <a href="url">xxx</a>

js：window.open("url","窗口名","窗口配置");

open("url","_self");

2. 在当前窗口打开，不可后退

js： location.replace("新url");

替换history中当前url，不新增history记录。

3. 在新窗口打开，可打开多个

html：<a href="url" target="_blank">xxx</a>

js：open("url","_blank");

默认为_blank

4. 在新窗口打开，只能打开一个

html：<a href="url" target="自定义窗口名">xxx</a>

window.name

浏览器规定：内存中同名窗口对象只能出现一次

后出现的同名窗口会覆盖前一个

js：open("url","自定义窗口名")

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>打开新链接方式总结</title>
<script>
//打开新链接方式总结：
//1. 在当前窗口打开，可后退
function fun1(){
open("http://weixin.com","_self");
}
//2. 在当前窗口打开，不可后退
function fun2(){
location.replace("http://weixin.com");
}
//3. 在新窗口打开，可重复打开
function fun3(){
open("http://weixin.com","_blank");
}
//4. 在新窗口打开，不可重复打开
function fun4(){
open("http://weixin.com","uname");
}
</script>
</head>
<body>
<a href="javascript:fun1()">click me 可后退</a><br/><br/>
<a href="javascript:fun2()">click me 不可后退</a><br/><br/>
<a href="javascript:fun3()">click me 可重复打开多个</a><br/><br/>
<a href="javascript:fun4()">click me 不可重复打开</a>
</body>
</html>

复制代码

2. 窗口大小和窗口位置：

1. 窗口大小：不带单位

window.outerWidth/outerHeight 窗口的宽和高

window.innerWidth/innerHeight 文档显示区的宽高

修改窗口大小：2个方法：

window.resizeTo(width,height);

window.resizeBy(width的增量,height的增量);

2. 窗口位置：

移动窗口的位置：2个方法：

window.moveTo(left , top)

window.moveBy(left的增量，top的增量)

3. 打开窗口时，设定新窗口的大小和位置

窗口左上角距显示器左上角的位置top和left

窗口宽度和高度width和height

var config="top=?,left=?,width=?,height=?,resizable=yes,location=no";

open("url","name",config)

4. screen.height/width: 完整桌面分辨率的高和宽

screen.availHeight/availWidth: 完整桌面分辨率去掉任务栏后的宽和高。

win7下任务栏透明，导致availHeight和height同化。

例如:

<!DOCTYPE html>
<html>
<head>
<title>小游戏：点不到的小窗口</title>
<meta charset="utf-8"/>
<script src="js/2.js"></script>
</head>
<body>
<button onclick="game.start()">开始游戏</button>
</body>
</html>
下面的js文件:
var game={
width:50, //窗口宽
height:50, //窗口高
maxTop:0, //top属性可取的最大值，屏幕高-任务栏高-height
maxLeft:0, //left属性可取的最大值，屏幕宽-width
taskH:30, //任务栏的高度
pop:null, //保存弹出的小窗口对象
start:function(){//游戏启动
var self=this; //留住this--game,
//计算maxTop：屏幕的height-taskH-height
self.maxTop=screen.height-self.taskH-self.height;
//计算maxLeft：屏幕的width-width
self.maxLeft=screen.width-self.width;
//在0~maxTop之间取随机top值，保存在变量top中
var top=Math.floor(Math.random()*(self.maxTop+1));
//在0~maxLeft之间取随机left值，保存在变量left中
var left=Math.floor(Math.random()*(self.maxLeft+1));
//拼接config字符串，top值为top，left值为left，width值为width，height值为height，启用调整大小，禁用地址栏
var config="top="+top+",left="+left
+",width="+self.width
+",height="+self.height
+",resizable=yes,location=no";
//打开一个新窗口，同时设置窗口的url为"about:blank",name为"pop",config为字符串config，最后将新窗口对象存入pop属性中
self.pop=open("about:blank","pop",config);
//向新的body中写入：
//<img src="d:/xiaoxin.gif" onclick="alert('约么?')"/>
self.pop.document.write('<img src="d:/xiaoxin.gif" width="80px" onclick="alert('姐姐,你要吃青椒吗?')"/>');
self.pop.onmouseover=function(){//this-->pop
//获得事件对象：
// 事件发生时自动创建，封装事件和鼠标信息的对象
var e=window.event||arguments[0];
//获取事件对象中的相对于屏幕左上角的鼠标位置
var x=e.screenX, y=e.screenY;
for(;;){//self-->game
//计算新的top和left，保存在变量top和left中
var top=
Math.floor(Math.random()*(self.maxTop+1));//防止形成闭包
var left=
Math.floor(Math.random()*(self.maxLeft+1));//防止形成闭包
//如果鼠标位置不在pop的范围内
if(y<top||y>top+self.height||x<left||x>left+self.width){
// 就将pop移动到top和left的位置
self.pop.moveTo(left,top);
break;
}
}
}
}
}