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

2019-11-21 00:00:38

字體：大中小

供稿：網(wǎng)友

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

小結(jié)：一般情況下，windows.open因?yàn)樽远x的比較多，所以用windows.open的較多，上面的很多網(wǎng)頁編輯器喜歡用showModalDialog,實(shí)在不知道用哪個(gè)的的，就用window.open吧，很多成熟的cms系統(tǒng)都是用的window.open.

上一篇：js中查找最近的共有祖先元素的實(shí)現(xiàn)代碼

下一篇：JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明