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

Posted 2020-08-13 Jener_Yan

★  示例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)