首页 > 代码库 > 使用BOM 的window对象属性打开新窗口

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

2024-08-15 19:57:17   220人阅读

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



来自为知笔记(Wiz)



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


联系
我们