今天Insus.NET練習JavaScript,實現從父窗口打開一個子窗口,在子窗口處理一些結果之後,把結果賦值於父窗口的文本框內。可看效果:
在站點創建兩個aspx頁面,一個是PageA.aspx另一個是PageB.aspx:
在PageA.aspx的<head>節點內,寫Javascript腳本,腳本有兩個方法,一個是打開子窗口,一個是為文本框設值的方法:
復制代碼 代碼如下:
<script type="text/javascript">
function popUp(url) {
objSubWin = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=80");
objSubWin.focus();
}
function SetValue(val) {
var amount = document.getElementById('<% = TextBoxAmount.ClientID %>');
amount.value = val;
}
</script>
然後在<body>節點內,拉一個TextBox和一個Button:
復制代碼 代碼如下:
Amount:
<asp:TextBox ID="TextBoxAmount" runat="server" Enabled="false"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Call child window" OnClientClick="popUp('PageB.aspx')" />
OK,父頁完成,接下來寫PageB.aspx子頁,還是先寫Javascript腳本,也有兩個函數,一個是驗證文本框只能輸入數字,另一個是計算方法,在calc()方法內,有呼叫到父窗口的方法。
復制代碼 代碼如下:
<script type="text/javascript">
function isNumeric(keyCode) {
return ((keyCode >= 48 && keyCode <= 57) || keyCode == 8)
}
function calc() {
if (window.opener != null && !window.opener.closed) {
var qty = document.getElementById('<% = TextBoxqty.ClientID %>');
var price = document.getElementById('<% = TextBoxPrice.ClientID %>');
window.opener.SetValue(parseInt(qty.value) * parseInt(price.value));
}
}
</script>
在PageB.aspx的<body>節點內,拉兩個文本框,一個Button铵鈕。
復制代碼 代碼如下:
數量<asp:TextBox ID="TextBoxqty" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>
* 單價<asp:TextBox ID="TextBoxPrice" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Calculate" OnClientClick="calc()" />
另外附加,有關文本框驗證的文章:http://www.jb51.net/article/33586.htm