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
评论 (1)
学习了!欢迎到我的网站逛逛!http://www.pointeyes.com/