[HTML+Javascript]不同網頁視窗間傳遞參數

來源:互聯網
上載者:User
javascript|網頁

今天small問了我一個 AP 裡面蠻常見的功能如何寫,也就是按下一個按鈕後會開啟一個視窗,然後在視窗關閉之後將值回傳回去給原來視窗,可是這個功能要在網頁上呈現卻不太容易,如果說只要在 IE 上實作那還不太難,只要父視窗用 window.showModalDialog 開啟子網頁視窗,然後子網頁視窗只要在關閉前設定 window.returnValue,父視窗就可以接到處理結果(window.returnValue)。有於這個過程算是同步的,所以沒什麼問題。可是 firefox 基於安全理由(http://forums.mozine.org/lofiversion/index.php/t2569.html)不支援 showModalDialog,所以,目前我只知道透過 window.open 來實作,雖然不太相同,但仍然可以模擬出效果。程式如下:
parent.htm
-------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body>
<form id = 'frmMain' name = 'frmMain'>
<button onclick = 'getValue();'>getValue</button>
<input type = 'textbox' value = "" id = 'txtValue' name = 'txtValue' style = 'display: none'/>
<button id = 'btnReturn' name = 'btnReturn' onclick = 'returnValue();' style = 'display: none'></button>
</form>
<script type = 'text/javascript'>
<!--//
var winHandler = null;
function getValue(){
winHandler = window.open("child.htm", "child");
}

function returnValue(){
alert( document.getElementById('txtValue').value );
}
//-->
</script>
</body>
</html>

child.htm
-------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body>
<button onclick = 'btnClose_Click();'>close</button>
<input type = 'textbox' id = 'txtInput' value = ''/>
<script type = 'text/javascript'>
<!--//
var winHandler = null;
function btnClose_Click(){
if (window.opener != null){
  var txt = window.opener.document.frmMain.txtValue;  
  var btn = window.opener.document.frmMain.btnReturn;
  if (txt != null){
  txt.value = document.getElementById('txtInput').value;
  }
  btn.click();
}
self.close();
}
//-->
</script>
</body>
</html>
如果眼尖的人應該會發現我透過 btnReturn 和 txtValue 以非同步方式來取得回傳值,因為就目前所知伺服沒有其他辦法可以讓 window.open 以同步方式呈現,所以只能以這種怪異方式取得..... @_@



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。