JavaScript BOM初体验-window.open

看了半天，终于到了我觉得实战的部分了，首先是window.open，说白了就是弹出窗口。基础的来讲：

1// 等同于 <a href="http://codesky.me" target="topFrame"></a>
2window.open("http://codesky.me", "topFrame");
3

等价的时候用没什么前途，所以这里还有别的用法，topFrame，也就是第二个参数，可以传入_self,_parent,top以及_blank，而第二个参数并不是已存在的窗口和框架时，会去读取第三个参数来决定，第三个参数中似乎一些都是不怎么好用的，主要是top,width,left,height位置。

比如：

1window.open('http://codesky.me', '_blank', ' height=500, width=300, left=20, top=20');
2

就会弹出一个窗口（不过大部分时候都是被和谐的命运）

除此以外，close()方法可以关闭这个弹出的窗口（其它窗口是无权操作的），另外还有moveTo()``resizeTo()这种由名便知的。

如果弹窗被屏蔽，一般而言会返回null并抛出错误，所以我们可以用

1    var blocked = false;
2    try {
3        var pop = window.open('http://xsky.me', '_blank', 'height=500, width=300, left=20, top=20');
4        if (pop == null) {
5            blocked = true;
6        }
7    } catch(ex) {
8        blocked = true;
9    }
10
11    if (blocked) {
12        alert("The pop was blocked");
13    }
14

来检测弹窗是否被阻止了并提示。

然后稍微用前面的知识折腾了一下，具体在源代码里也能写的挺明白的，代码渣，勿怪。

演示

1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="UTF-8">
5    <title>Window-on</title>
6</head>
7<body>
8<script>
9    function NewWindow() {
10        this.win = window.open('http://codesky.me', '_blank', ' height=500, width=300, left=20, top=20');
11    }
12    NewWindow.prototype = {
13        constructor: NewWindow,
14        close: function () {
15            this.win.close();
16        },
17
18        resize: function () {
19            this.win.resizeTo(300, 300);
20        },
21
22        moveTo: function () {
23            this.win.moveTo(100, 100);
24        }
25    }
26
27    /* 第一种方式：简易版
28    var pop = window.open('http://xsky.me', '_blank', ' height=500, width=300, left=20, top=20');
29    if (pop == null) {
30        alert("The pop was blocked!");
31    }
32    */
33
34    /* 第二种方式：更精确 */
35    var blocked = false;
36    try {
37        var pop = window.open('http://xsky.me', '_blank', 'height=500, width=300, left=20, top=20');
38        if (pop == null) {
39            blocked = true;
40        }
41    } catch(ex) {
42        blocked = true;
43    }
44
45    if (blocked) {
46        alert("The pop was blocked");
47    }
48
49</script>
50<input type="button" value="Hello Sky" onclick="windows = new NewWindow();"/>
51<input type="button" value="close" onclick="windows.close();" />
52<input type="button" value="resize" onclick="windows.resize();" />
53<input type="button" value="moveTo" onclick="windows.moveTo();" />
54</body>
55</html>
56

CodeSky 代码之空

JavaScript BOM初体验-window.open

评论 (1)