Js 彈出框口并返回值的兩種常用方法
更新時(shí)間：2010年12月30日 22:29:00 作者：
有時(shí)候我們需要在新窗口執(zhí)行一些代碼并講求將執(zhí)行的結(jié)果返回到這個(gè)頁(yè)面，那么就需要下面的方法，js常用的就是下面這中方法。
1.window.showModalDialog(url,args,dialogattrs)
參數(shù)說(shuō)明：
url:彈出頁(yè)面地址
agrs：主窗口傳給對(duì)話框的參數(shù)，可以是任意類型（數(shù)組也可以）
dialogattrs：彈出窗口的樣式參數(shù)
模式對(duì)話框用法：
主窗口：var value =window.showModalDialog('test.jsp',strs,'resizable:yes');
彈出框中通過window.returnValue來(lái)設(shè)置返回值，上面的value拿到的就是這個(gè)值，然后主窗口中可以對(duì)
這個(gè)值進(jìn)行處理，實(shí)現(xiàn)交互處理
注：模式對(duì)話框的應(yīng)用就在于它的返回值，可以返回簡(jiǎn)單字符竄，也可以返回?cái)?shù)組，非模式對(duì)話框類似
2。window.open:
【父窗口】
<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>
【子窗口】
<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)頁(yè)編輯器喜歡用showModalDialog,實(shí)在不知道用哪個(gè)的的，就用window.open吧，很多成熟的cms系統(tǒng)都是用的window.open.
參數(shù)說(shuō)明：
url:彈出頁(yè)面地址
agrs：主窗口傳給對(duì)話框的參數(shù)，可以是任意類型（數(shù)組也可以）
dialogattrs：彈出窗口的樣式參數(shù)
模式對(duì)話框用法：
主窗口：var value =window.showModalDialog('test.jsp',strs,'resizable:yes');
彈出框中通過window.returnValue來(lái)設(shè)置返回值，上面的value拿到的就是這個(gè)值，然后主窗口中可以對(duì)
這個(gè)值進(jìn)行處理，實(shí)現(xiàn)交互處理
注：模式對(duì)話框的應(yīng)用就在于它的返回值，可以返回簡(jiǎn)單字符竄，也可以返回?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)頁(yè)編輯器喜歡用showModalDialog,實(shí)在不知道用哪個(gè)的的，就用window.open吧，很多成熟的cms系統(tǒng)都是用的window.open.
相關(guān)文章
JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法
這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法,文章通過代碼示例給大家講解的非常詳細(xì),?對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了JavaScript訪問字符串中單個(gè)字符的兩種方法,本文分別講解了索引方式訪問單個(gè)字符串、charAt()函數(shù)訪問單個(gè)字符以及兩種方式的不同,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)電子時(shí)鐘功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
web頁(yè)面和微信小程序頁(yè)面實(shí)現(xiàn)瀑布流效果
這篇文章主要介紹了web頁(yè)面和微信小程序頁(yè)面實(shí)現(xiàn)瀑布流效果，本文通過實(shí)例代碼圖文介紹，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
顯示/隱藏側(cè)邊欄...2006-10-10
TypeScript快速上手語(yǔ)法及結(jié)合vue3用法詳解
TypeScript是一種由微軟開發(fā)的自由開源的編程語(yǔ)言,主要提供了類型系統(tǒng)和對(duì)ES6的支持,下面這篇文章主要給大家介紹了關(guān)于TypeScript快速上手語(yǔ)法及結(jié)合vue3用法的相關(guān)資料,需要的朋友可以參考下2024-02-02
JavaScript中有關(guān)一個(gè)數(shù)組中最大值和最小值及它們的下表的輸出的解決辦法
這篇文章主要介紹了JavaScript中有關(guān)一個(gè)數(shù)組中最大值和最小值及它們的下表的輸出的一種解決辦法，本文還給大家介紹了js快速獲取數(shù)組中最大值和最小值的方法，非常不錯(cuò),需要的朋友可以參考下2016-07-07
使用JS判斷是否數(shù)字和小數(shù)點(diǎn)組合的數(shù)字的兩中方法比較(isNaN和逐判斷)
使用js判斷數(shù)字和小數(shù)點(diǎn)的方法非常之多。但是就目前而言，我見過最好用的判斷方法應(yīng)該來(lái)說(shuō)是isNaN，它比較方便，而逐個(gè)比較的方法有一定的弊端。2009-09-09
分享JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件，有需要的朋友可以參考一下2013-12-12
js限制輸入框只能輸入數(shù)字(onkeyup觸發(fā))
這篇文章主要介紹了通過js實(shí)現(xiàn)input輸入框只能輸入數(shù)字的實(shí)現(xiàn)方法，主要是通過正則表達(dá)式替換實(shí)現(xiàn),需要的朋友可以參考下2018-09-09