使用BOM 的window对象属性打开新窗口

Posted Jener_Yan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用BOM 的window对象属性打开新窗口相关的知识,希望对你有一定的参考价值。

★  示例1

要求:弹出新窗口,并向新窗口写入动态html代码
代码
  1. <buttononclick="btnOpen()">打开新窗口</button>
  2. <hr/>
  3. <span>使用javascript打开一个新的浏览器选项卡,并向其中动态写入HTML代码</span>
  4. <script>
  5. function openNewWin(){
  6. var w = window.open();/*打开空白窗口*/
  7. var d = w.document;/*获取该窗口的document对象*/
  8. d.open();/*新建html文档*/
  9. d.write("Dynamic code...");
  10. d.close();/*关闭html文档*/
  11. }
  12. function btnOpen(){
  13. return openNewWin();
  14. }
  15. </script>
效果图
 
★  示例2
要求:弹出可跳动的新窗口
代码
  1. <h2>跳动的窗口</h2>
  2. <hr/>
  3. <buttononclick="bounce.start()">打开跳动的窗口</button>
  4. <buttononclick="bounce.stop()">关闭跳动的窗口</button>
  5. <script>
  6. /*声明跳动窗口的对象*/
  7. var bounce ={
  8. x:0, y:0, w:300, h:200,//确定新建浏览器窗口左上角的坐标(x,y),宽度w,高度h
  9. dx:10, dy:15,//定义x,y坐标每次变化的增量
  10. win:null,//应用即将创建的浏览器窗口
  11. internal:100,//(x,y)坐标更新间隔(以毫秒(ms)为单位)
  12. timer:null,//定时器,由setInternal()方法返回
  13. start:function(){
  14. //为使浏览器窗口居于屏幕中央,计算左上角的坐标(x,y)
  15. bounce.x =(screen.availWidth - bounce.w)/2;
  16. bounce.y =(screen.availHeight - bounce.h)/2;
  17. //创建一个新的浏览器窗口并显示它
  18. //第一个参数表示新窗口中要显示的URL,可以直接使用JavaScript前缀执行简短的JavaScript代码
  19. //当浏览器解析到open的第一个参数会发现"<h1>Bounced-Window</h1>"不是JavaScript,但默认情况下对于不能执行的javaScript代码
  20. //浏览器会直接输出,刚好实现了向新窗口输入HTML代码的目的
  21. bounce.win = window.open(\'JavaScript:"<h1>Bounced-Window</h1>"\',"_blank","left="+ bounce.x +",top="+ bounce.y +",width="+ bounce.w +",height="+ bounce.h +"");
  22. bounce.timer = setInterval(bounce.nextFrame, bounce.internal);
  23. //也可以不在上面的open方法中使用"javascript:"前缀来输出html代码,而是直接调用新窗口的document.write()方法来输出
  24. // 使用bounce.win.document来访问新窗口的document对象
  25. //每隔指定的毫秒数就使用setInterval( )方法调用nextFrame( )
  26. //方法返回值保存在timer属性中,这样,后面我们就可以调用clearInterval( )方法停止动画
  27. },
  28. stop:function(){
  29. clearInterval(bounce.timer);
  30. if(!bounce.win.closed) bounce.win.close();
  31. },
  32. nextFrame:function(){
  33. //如果关闭窗口,则清除定时器
  34. if(bounce.win.closed){
  35. clearInterval(bounce.timer);
  36. }
  37. //如果浏览器窗口跳动到屏幕的左或右边缘,则反向移动
  38. if((bounce.x + bounce.dx)>(screen.availWidth - bounce.w)||(bounce.x + bounce.dx)<0)
  39. bounce.dx =-bounce.dx;
  40. if((bounce.y + bounce.dy)>(screen.availHeight - bounce.h)||(bounce.y + bounce.dy)<0)
  41. bounce.dy =-bounce.dy;
  42. //同步更新当前窗口左上角的坐标,并结合moveTo属性实现跳动效果
  43. bounce.x =(bounce.x + bounce.dx);
  44. bounce.y =(bounce.y + bounce.dy);
  45. bounce.win.moveTo(bounce.x, bounce.y);
  46. }
  47. }
  48. </script>
效果图
 
关于示例2的解析:
        该效果的实现步骤是,先实现新窗口的弹出与关闭,然后再设置计时器并使窗口坐标随着更新。最后是关闭窗口和停止计时的判断。
 
 





以上是关于使用BOM 的window对象属性打开新窗口的主要内容,如果未能解决你的问题,请参考以下文章

BOM,文档宽高及窗口事件

javaScript之BOM

JavaScript小白教程7浏览器对象模型 BOM

javascript--BOM(browser object model)五大对象

BOM的window对象的属性及其方法

dom3