快捷導(dǎo)航

Js 彈出框口并返回值的兩種常用方法

更新時間：2010年12月30日 22:29:00 作者：

有時候我們需要在新窗口執(zhí)行一些代碼并講求將執(zhí)行的結(jié)果返回到這個頁面，那么就需要下面的方法，js常用的就是下面這中方法。

1.window.showModalDialog(url,args,dialogattrs)
參數(shù)說明：
url:彈出頁面地址
agrs：主窗口傳給對話框的參數(shù)，可以是任意類型（數(shù)組也可以）
dialogattrs：彈出窗口的樣式參數(shù)
模式對話框用法：
主窗口：var value =window.showModalDialog('test.jsp',strs,'resizable:yes');
彈出框中通過window.returnValue來設(shè)置返回值，上面的value拿到的就是這個值，然后主窗口中可以對
這個值進行處理，實現(xiàn)交互處理
注：模式對話框的應(yīng)用就在于它的返回值，可以返回簡單字符竄，也可以返回數(shù)組，非模式對話框類似
2。window.open:
【父窗口】

復(fù)制代碼代碼如下:

 
<script> 
function show_child() 
{ 
var child=window .open("child.html","child","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); 
/* if(!child.closed) 
{ 
if(!window .close()) 
{ 
var textValue = frm.txt.value; parent.frm0.txt0.value = textValue; 
} 
else 
{ 
window .close(); 
child.close(); 
} 
}*/ 
} 
</script> 
<a href="javascript:show_child();">打開子窗口</a> 
<form name=frm0> 
<input type="text" name="txt0" id="txt0"> //注意這里一定要寫ID屬性不然FF下取不到值 
</form> 

【子窗口】

復(fù)制代碼代碼如下:

 
<script> 
function choseItem() 
{ 
var v=""; 
var check_item = document.frm.item; 
for(i=0;i<check_item.length;i++) 
{ 
if(check_item[i].checked) 
{ 
v+=","+check_item[i].value; 
} 
document.frm.txt.value=v.replace(/^,{1}/,""); 
} 
} 
function foo() 
{ 
window .close(); 
window .opener.document.getElementById("txt0").value=document.getElementById("txt").value 
} 
</script> 
<body> 
<form name=frm> 
<input type=checkbox name=item value=1 onclick="choseItem();">a 
<input type=checkbox name=item value=2 onclick="choseItem();">b 
<input type=checkbox name=item value=3 onclick="choseItem();">c 
<input type=checkbox name=item value=4 onclick="choseItem();">d 
<input type=text name="txt" id="txt"> 
</form> 
<input type=button value="關(guān)閉" onclick="foo();"> 
</body> 