子窗口給父窗口賦值實(shí)現(xiàn)思路及案例演示
更新時(shí)間:2013年01月27日 13:36:09 作者:
今天學(xué)習(xí)一下javascript實(shí)現(xiàn)從父窗口打開一個(gè)子窗口,在子窗口處理一些結(jié)果之后,把結(jié)果賦值于父窗口的文本框內(nèi),接下來介紹實(shí)現(xiàn)方法,感興趣的朋友可以了解下,希望本文對(duì)你有所幫助
今天Insus.NET練習(xí)JavaScript,實(shí)現(xiàn)從父窗口打開一個(gè)子窗口,在子窗口處理一些結(jié)果之后,把結(jié)果賦值于父窗口的文本框內(nèi)。可看效果:
在站點(diǎn)創(chuàng)建兩個(gè)aspx頁(yè)面,一個(gè)是PageA.aspx另一個(gè)是PageB.aspx:
在PageA.aspx的<head>節(jié)點(diǎn)內(nèi),寫Javascript腳本,腳本有兩個(gè)方法,一個(gè)是打開子窗口,一個(gè)是為文本框設(shè)值的方法:
<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>節(jié)點(diǎn)內(nèi),拉一個(gè)TextBox和一個(gè)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,父頁(yè)完成,接下來寫PageB.aspx子頁(yè),還是先寫Javascript腳本,也有兩個(gè)函數(shù),一個(gè)是驗(yàn)證文本框只能輸入數(shù)字,另一個(gè)是計(jì)算方法,在calc()方法內(nèi),有呼叫到父窗口的方法。
<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>節(jié)點(diǎn)內(nèi),拉兩個(gè)文本框,一個(gè)Button銨鈕。
數(shù)量<asp:TextBox ID="TextBoxqty" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>
* 單價(jià)<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()" />
另外附加,有關(guān)文本框驗(yàn)證的文章:http://www.dbjr.com.cn/article/33586.htm

在站點(diǎn)創(chuàng)建兩個(gè)aspx頁(yè)面,一個(gè)是PageA.aspx另一個(gè)是PageB.aspx:
在PageA.aspx的<head>節(jié)點(diǎn)內(nèi),寫Javascript腳本,腳本有兩個(gè)方法,一個(gè)是打開子窗口,一個(gè)是為文本框設(shè)值的方法:
復(fù)制代碼 代碼如下:
<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>節(jié)點(diǎn)內(nèi),拉一個(gè)TextBox和一個(gè)Button:
復(fù)制代碼 代碼如下:
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,父頁(yè)完成,接下來寫PageB.aspx子頁(yè),還是先寫Javascript腳本,也有兩個(gè)函數(shù),一個(gè)是驗(yàn)證文本框只能輸入數(shù)字,另一個(gè)是計(jì)算方法,在calc()方法內(nèi),有呼叫到父窗口的方法。
復(fù)制代碼 代碼如下:
<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>節(jié)點(diǎn)內(nèi),拉兩個(gè)文本框,一個(gè)Button銨鈕。
復(fù)制代碼 代碼如下:
數(shù)量<asp:TextBox ID="TextBoxqty" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>
* 單價(jià)<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()" />
另外附加,有關(guān)文本框驗(yàn)證的文章:http://www.dbjr.com.cn/article/33586.htm
相關(guān)文章
ASP.NET.4.5.1+MVC5.0設(shè)置系統(tǒng)角色與權(quán)限(一)
這篇文章主要介紹了ASP.NET.4.5.1+MVC5.0設(shè)置系統(tǒng)角色與權(quán)限的部分內(nèi)容,后續(xù)我們將繼續(xù)討論這個(gè)話題,希望小伙伴們喜歡。2015-01-01詳細(xì)介紹.NET中的動(dòng)態(tài)編譯技術(shù)
這篇文章詳細(xì)介紹了.NET中的動(dòng)態(tài)編譯技術(shù),有需要的朋友可以參考一下2013-11-11ASP.NET?MVC5網(wǎng)站開發(fā)之網(wǎng)站設(shè)置(九)
這篇文章主要為大家詳細(xì)介紹了ASP.NET?MVC5網(wǎng)站開發(fā)之網(wǎng)站設(shè)置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08asp.net實(shí)現(xiàn)Gradview綁定數(shù)據(jù)庫(kù)數(shù)據(jù)并導(dǎo)出Excel的方法
這篇文章主要介紹了asp.net實(shí)現(xiàn)Gradview綁定數(shù)據(jù)庫(kù)數(shù)據(jù)并導(dǎo)出Excel的方法,涉及asp.net操作Gradview實(shí)現(xiàn)數(shù)據(jù)庫(kù)綁定及數(shù)據(jù)導(dǎo)出的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11ASP.NET動(dòng)態(tài)加載用戶控件的實(shí)現(xiàn)方法
動(dòng)態(tài)加載用戶控件的方法,用asp.net的朋友推薦2008-10-10