window.open

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法:

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。


窗口名称:可选参数,被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:
打开一个 400 x 100 的干净的窗口: open('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
参数说明如下:
top=# 窗口顶部离开屏幕顶部的像素数
left=# 窗口左端离开屏幕左端的像素数
width=# 窗口的宽度
height=# 窗口的高度
menubar=... 窗口有没有菜单,取值yes或no
toolbar=... 窗口有没有工具条,取值yes或no
location=... 窗口有没有地址栏,取值yes或no
directories=... 窗口有没有连接区,取值yes或no
scrollbars=... 窗口有没有滚动条,取值yes或no
status=... 窗口有没有状态栏,取值yes或no
resizable=... 窗口给不给调整大小,取值yes或no


例如:打开http://www.baidu.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

<script type="text/javascript">
window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
--------------------------------------------------------------------------------------------------------------------------
调用方式:
方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;
方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
<a href="#" onclick="openwin()">打开一个窗口</a>
注意:使用的"#"是虚连接。
方法四:用一个按钮调用:
<input type="button" onclick="openwin()" value="打开窗口">
-----------------------------------------------------------------------------------------------------------------------
window.open() 父子页面的传参&传值问题

1.url页面拿父页面的xx元素赋值 :

function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("txtName");//获取父窗口中元素,也可以获取父窗体中的值
txtName.value = document.getElementById("ddlNames").value;//将子窗体中的值传递到父窗体中去
}
window.close();
}
2.刷新父页面

if(window.opener){//判断是否有父窗口,即打开本页面的窗口
window.opener.location.reload();//刷新父窗口
window.opener.close(); //关闭父窗口
}

----------------------------------------------------------------------------------------------------------------------------
同时弹出2个窗口:

function openwin()
{
window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

}
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。

-------------------------------------------------------------------------------------------------------------------------------------------
主窗口打开文件1.htm,同时弹出小窗口page.html:

1.主窗口<head>区:

<script language="javascript">

function openwin()
{window.open("page.html","","width=200,height=200")
}

</script>

2.加入<body>区:
<a href="1.htm" onclick="openwin()">open</a>

-----------------------------------------------------------------------------------------------------------------------------------------
弹出的窗口之定时关闭控制:

加入子页面:
<script language="JavaScript">
function closeit(){
{setTimeout("self.close()",10000) //毫秒
}
</script>

<body onload="closeit()">
---------------------------------------------------------------------------------------------------------------------------------------
弹出的窗口之Cookie控制:

加入主页面HTML的<HEAD>区:

<script>
function openwin() {
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
</script>


<body onload="loadpopup()">
--------------------------------------------------------------------------------------------------------------------------------
父页面打开子页面,子页面完成操作后触发父页面的事件

很多解决方案是用window.showModalDialog来实现的,因为它有返回值,可以根据返回值来实现。
但是chrome37以后就不支持window.showModalDialog,考虑兼容性,就不能使用window.showModalDialog。
所以说,只能用window.open打开,但是window.open没有返回值,所以只能在子页面中想办法触发父页面的事件。

子页面中添加关闭函数:
function doColsing(rAction){
//window.location="<base:rewrite page="/sys/worktop.do"/>";
var bbmk = "<%=request.getParameter("bbmk") %>";

// 如果是财务,则返回到控制台
if (bbmk == "cwbb") {
window.location="<base:rewrite page="/sys/worktop.do?bbmk=cwbb"/>";
}
window.close();
}

Java中(applet)调用js代码:

JSObject js = JSObject.getWindow(this);
js.eval("doColsing('')");


以上使用的关闭适用于三级页面:A通过open()打开B,B通过window.location跳转到其他页面打开Jframe,此时想在Jframe关闭时自动关闭B而不关闭
A,则用以上代码。

若想关闭B时也关闭A,用以下代码:

有两种方式:
a) 子窗口关闭时关闭父窗口:

opener.location.reload();
window.close();

b)父窗口去检测,子窗口是否已经关闭了,在设定的一段时间之后自动刷新:

<script>
var newWindow;
var timer;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
timer = setInterval("updateAfterClose()", 1000);
}

function updateAfterClose() {
//父窗口去检测子窗口是否关闭,然后通过自我刷新,而不是子窗口去刷新父窗口
if(newWindow.closed == true) {
clearInterval(timer);
self.location.reload(); // 主窗口刷新
return;
}
}
</script>
---------------------------------------------------------------------------------------------------------------------------------
父窗口关闭的时候关闭子窗口:

用方法去检测父窗口的onunload事件
<script>
var newWindow;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
}
function closeChild()
{
newWindow.close();
}
</script>


<body onunload="closeChild()">

----------------------------------------------------------------------------------------------------------------------------------
在开发中遇到需要在打开窗口的同时给父窗口添加遮罩防止用户误操作,而在窗口关闭时需要去掉父窗口的遮罩以便用户操作。

所以可以利用setInterval()来周期性的检测打开的窗口是否关闭。

如果检测到窗口已经关闭,则需要掉用clearInterval()终止监测行为。

1、创建一个新的窗口:

var newWin = window.open(url,name,"height=500,width=1000");
$("body",parent.document).mask("信息编辑中...");

2、创建监测的函数,监测周期为1秒:

var loop = setInterval(function() {
if(newWin .closed) {
clearInterval(loop);
$("body",parent.document).unmask();
}
}, 1000);

--------------------------------

原文地址:https://www.cnblogs.com/wuxinyan/p/8621421.html