使用BOM 的window对象属性打开新窗口
★ 示例1
要求:弹出新窗口,并向新窗口写入动态HTML代码
代码
<buttononclick="btnOpen()">打开新窗口</button>
<hr/>
<span>使用JavaScript打开一个新的浏览器选项卡,并向其中动态写入HTML代码</span>
<script>
function openNewWin(){
var w = window.open();/*打开空白窗口*/
var d = w.document;/*获取该窗口的document对象*/
d.open();/*新建html文档*/
d.write("Dynamic code...");
d.close();/*关闭html文档*/
}
function btnOpen(){
return openNewWin();
}
</script>
效果图
![](https://images2015.cnblogs.com/blog/1005082/201610/1005082-20161006202742176-111684822.jpg)
★ 示例2
要求:弹出可跳动的新窗口
代码
<h2>跳动的窗口</h2>
<hr/>
<buttononclick="bounce.start()">打开跳动的窗口</button>
<buttononclick="bounce.stop()">关闭跳动的窗口</button>
<script>
/*声明跳动窗口的对象*/
var bounce ={
x:0, y:0, w:300, h:200,//确定新建浏览器窗口左上角的坐标(x,y),宽度w,高度h
dx:10, dy:15,//定义x,y坐标每次变化的增量
win:null,//应用即将创建的浏览器窗口
internal:100,//(x,y)坐标更新间隔(以毫秒(ms)为单位)
timer:null,//定时器,由setInternal()方法返回
start:function(){
//为使浏览器窗口居于屏幕中央,计算左上角的坐标(x,y)
bounce.x =(screen.availWidth - bounce.w)/2;
bounce.y =(screen.availHeight - bounce.h)/2;
//创建一个新的浏览器窗口并显示它
//第一个参数表示新窗口中要显示的URL,可以直接使用JavaScript前缀执行简短的JavaScript代码
//当浏览器解析到open的第一个参数会发现"<h1>Bounced-Window</h1>"不是JavaScript,但默认情况下对于不能执行的javaScript代码
//浏览器会直接输出,刚好实现了向新窗口输入HTML代码的目的
bounce.win = window.open('JavaScript:"<h1>Bounced-Window</h1>"',"_blank","left="+ bounce.x +",top="+ bounce.y +",width="+ bounce.w +",height="+ bounce.h +"");
bounce.timer = setInterval(bounce.nextFrame, bounce.internal);
//也可以不在上面的open方法中使用"javascript:"前缀来输出html代码,而是直接调用新窗口的document.write()方法来输出
// 使用bounce.win.document来访问新窗口的document对象
//每隔指定的毫秒数就使用setInterval( )方法调用nextFrame( )
//方法返回值保存在timer属性中,这样,后面我们就可以调用clearInterval( )方法停止动画
},
stop:function(){
clearInterval(bounce.timer);
if(!bounce.win.closed) bounce.win.close();
},
nextFrame:function(){
//如果关闭窗口,则清除定时器
if(bounce.win.closed){
clearInterval(bounce.timer);
}
//如果浏览器窗口跳动到屏幕的左或右边缘,则反向移动
if((bounce.x + bounce.dx)>(screen.availWidth - bounce.w)||(bounce.x + bounce.dx)<0)
bounce.dx =-bounce.dx;
if((bounce.y + bounce.dy)>(screen.availHeight - bounce.h)||(bounce.y + bounce.dy)<0)
bounce.dy =-bounce.dy;
//同步更新当前窗口左上角的坐标,并结合moveTo属性实现跳动效果
bounce.x =(bounce.x + bounce.dx);
bounce.y =(bounce.y + bounce.dy);
bounce.win.moveTo(bounce.x, bounce.y);
}
}
</script>
效果图
![](https://images2015.cnblogs.com/blog/1005082/201610/1005082-20161006202743129-86106253.png)
![](https://images2015.cnblogs.com/blog/1005082/201610/1005082-20161006202743598-1093716515.png)
关于示例2的解析:
该效果的实现步骤是,先实现新窗口的弹出与关闭,然后再设置计时器并使窗口坐标随着更新。最后是关闭窗口和停止计时的判断。
从零到现在,一路走来,感谢众多无私的知识分享者,我愿意为你们接下一棒!