JavaScript BOM初体验-window.open
看了半天,终于到了我觉得实战的部分了,首先是window.open
,说白了就是弹出窗口。
基础的来讲:
// 等同于 <a href="http://codesky.me" target="topFrame"></a>
window.open("http://codesky.me", "topFrame");
等价的时候用没什么前途,所以这里还有别的用法,topFrame
,也就是第二个参数,可以传入_self
,_parent
,top
以及_blank
,而第二个参数并不是已存在的窗口和框架时,会去读取第三个参数来决定,第三个参数中似乎一些都是不怎么好用的,主要是top
,width
,left
,height
位置。
比如:
window.open('http://codesky.me', '_blank', ' height=500, width=300, left=20, top=20');
就会弹出一个窗口(不过大部分时候都是被和谐的命运)
除此以外,close()
方法可以关闭这个弹出的窗口(其它窗口是无权操作的),另外还有moveTo()
`resizeTo()`这种由名便知的。
如果弹窗被屏蔽,一般而言会返回null
并抛出错误,所以我们可以用
var blocked = false;
try {
var pop = window.open('http://xsky.me', '_blank', 'height=500, width=300, left=20, top=20');
if (pop == null) {
blocked = true;
}
} catch(ex) {
blocked = true;
}
if (blocked) {
alert("The pop was blocked");
}
来检测弹窗是否被阻止了并提示。
然后稍微用前面的知识折腾了一下,具体在源代码里也能写的挺明白的,代码渣,勿怪。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Window-on</title>
</head>
<body>
<script>
function NewWindow() {
this.win = window.open('http://codesky.me', '_blank', ' height=500, width=300, left=20, top=20');
}
NewWindow.prototype = {
constructor: NewWindow,
close: function () {
this.win.close();
},
resize: function () {
this.win.resizeTo(300, 300);
},
moveTo: function () {
this.win.moveTo(100, 100);
}
}
/* 第一种方式:简易版
var pop = window.open('http://xsky.me', '_blank', ' height=500, width=300, left=20, top=20');
if (pop == null) {
alert("The pop was blocked!");
}
*/
/* 第二种方式:更精确 */
var blocked = false;
try {
var pop = window.open('http://xsky.me', '_blank', 'height=500, width=300, left=20, top=20');
if (pop == null) {
blocked = true;
}
} catch(ex) {
blocked = true;
}
if (blocked) {
alert("The pop was blocked");
}
</script>
<input type="button" value="Hello Sky" onclick="windows = new NewWindow();"/>
<input type="button" value="close" onclick="windows.close();" />
<input type="button" value="resize" onclick="windows.resize();" />
<input type="button" value="moveTo" onclick="windows.moveTo();" />
</body>
</html>
植入部分
如果您觉得文章不错,可以通过赞助支持我。
如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。
学习了!欢迎到我的网站逛逛!http://www.pointeyes.com/