JavaScript 彈出子窗體并返回結(jié)果到父窗體的實(shí)現(xiàn)代碼

更新時(shí)間：2016年05月28日 09:22:44 投稿：jingxian

下面小編就為大家?guī)硪黄狫avaScript 彈出子窗體并返回結(jié)果到父窗體的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

思路：用window.showModalDialog方法獲取到彈出子窗體的引用，再在子頁面用window.returnValue="***"來返回結(jié)果。

示例代碼：（用jQuery簡化實(shí)現(xiàn)）

父頁面：parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父頁面</title>
<mce:script language="javascript"><!--
 
function showmodal()
{  
var strReturn = window.showModalDialog("son.html",null,"dialogWidth:800px;dialogHeight:600px;help:no;status:no"); 
var s="您選擇了：";
for(var i=0;i<strReturn.length;i++)
{
	s+=strReturn[i]+",";
	}
alert(s);

}
// --></mce:script>
</body>
</html>

子頁面 son.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子窗體</title>
<mce:script type="text/javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></mce:script>
<mce:script type="text/javascript"><!--
var result;
$(function(){
		  $("#send").click(function(){
									 var result=new Array();
											$("[name=a]:checkbox:checked").each(function(){
												result.push($(this).val());									 
																						 });																	
									 window.returnValue=result;
									 window.close();
									 });
		  });
// --></mce:script>
</head>
<body>
<p>
<input type="checkbox" name="a" value="蘋果" />蘋果
<input type="checkbox" name="a" value="橘子" />橘子
<input type="checkbox" name="a" value="香蕉" />香蕉

<INPUT type="button" value="提交" id="send" /> 

</p>
</body>
</html>

總結(jié)：

參數(shù)傳遞：

1. 要想對話框傳遞參數(shù)，是通過vArguments來進(jìn)行傳遞的。類型不限制，對于字符串類型，最大為4096個(gè)字符。也可以傳遞對象，例如：
-------------------------------

parent.htm

<script>
     var obj = new Object();
     obj.name="51js";
     window.showModalDialog("son.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>

son.htm

<script>
     var obj = window.dialogArguments
     alert("您傳遞的參數(shù)為：" + obj.name)
</script>

2. 可以通過window.returnValue向打開對話框的窗口返回信息，當(dāng)然也可以是對象。例如：

parent.htm

<script>
     str =window.showModalDialog("son.htm",,"dialogWidth=200px;dialogHeight=100px");
     alert(str);
</script>

son.htm

<script>
     window.returnValue="http://blog.csdn.net/a497785609";
</script>

擴(kuò)展：

在.net中，可以通過這種方式來實(shí)現(xiàn)AJAX效果。當(dāng)子頁面?zhèn)鬟f所要選擇的參數(shù)后，父頁面可以實(shí)現(xiàn)ICallbackEventHandler接口，直接將獲取到的值傳回服務(wù)器端?；蛘哂?strong>UpdatePanel的Load事件來撲捉到傳遞過來的參數(shù)，從而繼續(xù)進(jìn)行服務(wù)器端處理。

以上這篇JavaScript 彈出子窗體并返回結(jié)果到父窗體的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: