关于window.open()方法的小结

window.open()方法可以打开一个新窗口,其格式及参数如下:

window = object.open([URL ][, name ][, features ][, replace]]]])
　　URL：新窗口的URL地址
　　name：新窗口的名称，可以为空
　　featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
　　fullscreen= { yes/no/1/0 } 是否全屏，默认no
　　channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
　　toolbar= { yes/no/1/0 } 是否显示工具条，默认no
　　location= { yes/no/1/0 } 是否显示地址栏，默认no
　　directories = { yes/no/1/0 } 是否显示转向按钮，默认no
　　status= { yes/no/1/0 } 是否显示窗口状态条，默认no
　　menubar= { yes/no/1/0 } 是否显示菜单，默认no
　　scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
　　resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
　　width=number 窗口宽度（像素单位）
　　height=number 窗口高度（像素单位）
　　top=number 窗口离屏幕顶部距离（像素单位）
　　left=number 窗口离屏幕左边距离（像素单位）

 

 

在应用时,通常写一个通用的方法来开启一个新窗口,如JS代码为:

 

var _winname = new Date().getTime();//窗体名称，默认为时间缪，保证唯一性var _newWin ;//新打开窗口的引用var _a;//创建关闭超链接var _br;//创建的br标签function createWin(url){if((typeof _newWin == "undefined") || _newWin==null){//窗口其它规格var _features = new Array(500,500,(screen.width/2 - 250),(screen.height/2 - 250),"no","no","no","yes","no","no","no","no");//判断用户传的参数是否有效并设置到窗口规格中for(var i=1 ; i<arguments.length;i++){var temp = arguments[i+1] ;if(i>0 && i<5){if(!isNaN(temp)){_features[i] = temp ;}}if(i>5){if(temp!="" && (temp=="yes"||temp=="no"||temp=="1"||temp=="0")){_features[i] = temp ;}}}//拼接规格字符串var features = "width="+_features[0]+",height="+_features[1]+",left="+_features[2]+",top="+_features[3]+",toolbar="+_features[4]+",location="+_features[5]+",directories="+_features[6]+",status="+_features[7]+",menubar="+_features[8]+",scrollbars="+_features[9]+",resiable="+_features[10]+",fullscreen="+_features[11]+"" ;//打开新窗口，返回新窗口句柄_newWin = window.open(url,_winname,features);//为子窗体添加一个Button，用于执行某些操作var btnclose = _newWin.document.createElement("input");btnclose.setAttribute("value"," close ");btnclose.setAttribute("type","button");btnclose.onclick = function(){if(_newWin.confirm("确定要关闭当前窗口吗？")){_newWin.opener.closeWindow();}}_newWin.document.body.appendChild(btnclose);//创建A标签和BR标签，用于控制打开的子窗口_a = document.createElement("a");_br = document.createElement("br");var _atext = document.createTextNode("close");_a.setAttribute("href","javascript:closeWindow();");_a.appendChild(_atext);//将创建的元素添加到Body中，当然可以附加到页面有效元素中document.body.appendChild(_br);document.body.appendChild(_a);//父窗体应用滤境document.body.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";}else{if((typeof _a !="undefined") || _a!=null){closeWindow();return ;}else{alert("新开的窗体尚未关闭不能重复创建窗体");var result = window.confirm("是否要关闭先前窗体？");if(result){closeWindow();}}}}//关闭打开的子窗体，并清除创建的元素function closeWindow(){document.body.style.filter = null ;_newWin.close();document.body.removeChild(_a);document.body.removeChild(_br);_a = null ;_br = null ;_newWin = null ;}

 

我们在页面中可以这样来调用:

 

<a href="javascript:createWin('about:blank');" mce_href="javascript:createWin('about:blank');">open1</a><a href="javascript:createWin('about:blank',150,150,300,300);" mce_href="javascript:createWin('about:blank',150,150,300,300);">open2</a><a href="javascript:createWin('about:blank','#',130,300,400,'yes');" mce_href="javascript:createWin('about:blank','#',130,300,400,'yes');">open3</a><a href="javascript:createWin('about:blank',160,'',300,300,'yes','yes');" mce_href="javascript:createWin('about:blank',160,'',300,300,'yes','yes');">open4</a><a href="javascript:createWin('about:blank',150,150,300,300,null,'yes','yes');" mce_href="javascript:createWin('about:blank',150,150,300,300,null,'yes','yes');">open5</a><a href="javascript:createWin('about:blank',150,150,300,300,'yes','1','1','1');" mce_href="javascript:createWin('about:blank',150,150,300,300,'yes','1','1','1');">open6</a><a href="javascript:createWin('about:blank',120,140,300,300,'yes','1','1','1','1');" mce_href="javascript:createWin('about:blank',120,140,300,300,'yes','1','1','1','1');">open7</a>

 

以上程序演示了本程序演示打开窗口的通用函数，调用参数的可变性，父与子窗体间的控制，和创建文档元素等用法等内容

 

当然还有一些应用是这样的:

window.opener  返回的是对父窗体的一个引用，通过它可以控制父窗体，常见有：

1、设置父页面背景
window.opener.document.body.backgroundColor = "red" ;

2、刷新父页面
window.opener.location.reload();

3、设置父页面文本框的值
window.opener.document.getElementById("txtUserName").value = "张三" ;

4、设置父页面单选按钮的状态
window.opener.document.getElementById("rdoMan").checked = true ;

5、显示父页面的层（利用层的透明属性可以制作蒙板效果）
window.opener.document.getElementById("divMask").style.display = "block" ;

6、让父页面应用滤镜效果  -- 应用灰度滤镜
window.opener.document.body.style.filter = "gray()"