父視窗： </p><p>url = url + '?winFlg=aaa&winPig=bbb'; </p><p>window.open(url, '', ''); </p><p>子視窗： </p><p>var URLParams = new Object();<br />var aParams = document.location.search.substr(1).split('&');<br />for (var i=0; i < aParams.length; i++) {<br /> var aParam = aParams[i].split('=');<br /> URLParams[aParam[0]] = aParam[1];<br />} </p><p>alert(URLParams["winFlg"]); </p><p>alert(URLParams["winPig"]); </p><p>================================================================================== </p><p>開啟一個新視窗，該子視窗調用父物件的方法或變數，這個問題一直沒有搞清楚。網上找了些資料，總結一下： </p><p>開啟新視窗一般有幾種方法，window.open(...),window.showModalDialog(...)，以及iframe中嵌套頁面這裡也一起研究吧，另外還有window.navigate(...)、window.location.href="..."、window.history.back(-1);都是實現同意頁面內容跳轉的，這裡不討論。 </p><p>1、open子視窗：用window.opener代表父視窗的window對象 </p><p>2、模態子視窗：間接通過傳window對象到子視窗，然後子視窗可獲得父視窗的window對象 </p><p>3、iframe中子頁面：用window.parent代表父視窗的window對象 </p><p>父頁面：1.htm 代碼: </p><p><html><br /><head><br /><title>開啟父子視窗傳值研究-父視窗</title> </p><p><mce:script ><!--</p><p>var parValue="現在顯示了父視窗中的變數值"; </p><p>function test(){<br />alert("現在顯示了父視窗中的方法正常執行");<br />} </p><p>// --></mce:script><br /></head><br /><body ><br /><input type="button" id="mybutton1" value="開啟open新視窗" onclick="window.open('2.htm');"><br /><input type="button" id="mybutton2" value="開啟modal視窗" onclick="window.showModalDialog('3.htm',window);" ><br /><br><br /><iframe id="subiframe" name="subiframe" src="4.htm" mce_src="4.htm" scrolling="auto" frameborder="1" ></iframe><br /></body><br /></html> </p><p>2.htm 代碼： </p><p><html><br /><head><br /><title>開啟父子視窗傳值研究-open開啟子視窗</title><br /><mce:script type="text/javascript"><!--</p><p>var buttonValue=window.opener.document.getElementById("mybutton2").value //擷取父視窗中的對象<br />var parentValue=window.opener.parValue; //擷取父視窗中的變數 </p><p>function doParTest(){<br />window.opener.test(); //調用父視窗中的方法 </p><p>}<br />// --></mce:script><br /></head><br /><body> </p><p><input type="button" value="open開啟子視窗按鈕" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()"> </p><p></body><br /></html> </p><p>3.htm 代碼： </p><p><html><br /><head><br /><title>開啟父子視窗傳值研究-開啟modal子視窗</title><br /><mce:script type="text/javascript"><!--</p><p>var parentWin=window.dialogArguments;<br />var buttonValue=parentWin.document.getElementById("mybutton2").value //擷取父視窗中的對象<br />var parentValue=parentWin.parValue; //擷取父視窗中的變數<br />function doParTest(){<br />parentWin.test(); //調用父視窗中的方法<br />}<br />// --></mce:script><br /></head> </p><p><body bgcolor="#FFFFFF" text="#000000"> </p><p><input type="button" value="modal子視窗按鈕" onclick="alert('buttonValue:'+buttonValue);alert </p><p>('parentValue:'+parentValue);parentWin.test();"><br /></body><br /></html> </p><p>4.htm 代碼： </p><p><html><br /><head><br /><title>開啟父子視窗傳值研究-iframe中子視窗</title><br /><mce:script type="text/javascript"><!--</p><p>var buttonValue=window.parent.document.getElementById("mybutton2").value //擷取父視窗中的對象<br />var parentValue=window.parent.parValue; //擷取父視窗中的變數 </p><p>function doParTest(){<br />window.parent.test(); //調用父視窗中的方法<br />}<br />// --></mce:script><br /></head><br /><body> </p><p><input type="button" value="iframe中子視窗按鈕" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()"> </p><p></body><br /></html> </p><p>
下面是自己寫了一個測試例子:
test1:
<input type="text" id="txt"><br /><div style="float:left;" mce_style="float:left;" id="div" ></div><br /><input type="button" value="open" onClick="openWindow()"> </p><p><mce:script type="text/javascript"><!--</p><p>function openWindow(){ </p><p> var result=window.showModalDialog("test2.html",window);<br /> alert(result);<br /> var arr = result.split('_');<br /> var arrCodes = arr[0].split(',');<br /> var arrNames = arr[1].split(',');<br /> document.getElementById('txt').value=arr[1]; </p><p> var innerH = '';<br /> for(var i=0;i<arrCodes.length-1;i++){<br /> innerH+='<input type=/"text/" name=/"old/" value=/"'+arrCodes[i]+'/" />'<br /> }<br /> document.getElementById('div').innerHTML=innerH; </p><p>}<br />// --></mce:script><br />
test2:
<html><br /> <head><br /><mce:script type="text/javascript"><!--</p><p>function onload(){ </p><p> var parentWin = window.dialogArguments;<br /> var obj = parentWin.document.getElementsByName('old');<br /> var oldValues = new Array();<br /> for(var i=0;i<obj.length;i++){<br /> oldValues[i]=obj[i].value;<br /> } </p><p> var obj = document.getElementsByName('selectValues');<br /> for(var i = 0;i<obj.length;i++){<br /> for(var j=0;j<oldValues.length;j++){<br /> if(obj[i].value == oldValues[j])<br /> { obj[i].checked='checked';}<br /> } </p><p>}<br />} </p><p>function ok(){ </p><p> var industryCodes = new Array();<br /> var industryNames = new Array(); </p><p> var tmpCodes = '';<br /> var tmpNames = '';<br /> var codes = document.getElementsByName("selectValues");<br /> var names = document.getElementsByName("selectNames"); </p><p> for(var i =0 ,j=0 ; i <codes.length;i++){<br /> if(codes[i].checked){<br /> tmpCodes += codes[i].value+',';<br /> tmpNames += names[i].value+',';<br /> j++;<br /> }<br /> } </p><p> var tmpValue =tmpCodes+'_'+tmpNames; </p><p> window.returnValue = tmpValue;<br /> window.close();<br />}<br />// --></mce:script><br /></head> </p><p><body onload="onload()"><br /><input type="text" id="test1" value="" /><br /><input type="checkbox" name="selectValues" value="1" />文本1<input type="hidden" name="selectNames" value="文本1" /><br /><br><br /><input type="checkbox" name="selectValues" value="2" />文本2<input type="hidden" name="selectNames" value="文本2" /><br /><br><br /><input type="checkbox" name="selectValues" value="3" />文本3<input type="hidden" name="selectNames" value="文本3" /><br /><br><br /><input type="button" onclick="ok()" /><br /></body><br /></html>
模態快顯視窗
returnValue除了可以是布爾值,整型值等以外還可以是個js數組，用來傳遞大量資料。 </p><p> showModalDialog，是模態視窗，始終獲得焦點，但彈出的表單不能重新整理，此彈出的視窗 裡操作button,要想不彈出新視窗，需在 </p><p>彈出的視窗中在<head>和</head>之間加<base target="_self">。<br />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
