ASP.NET頁面借助IFrame提交表單數據所遇到問題的解決方法分享
更新時間：2011年10月25日 16:11:41 作者：
ASP.NET頁面借助IFrame提交表單數據所遇到問題的解決方法分享，碰到同樣問題的朋友可以參考下。
首先看下面的代碼片段，我們希望用戶在點擊頁面上的Button時首先將數據提交到指定的第三方頁面，然后再執(zhí)行后臺的Page_Load事件。
<body>
<iframe id="WebGatewaySubmissionProcessor_IFrame" name="WebGatewaySubmissionProcessor_IFrame" style="display: none;"></iframe>
<form onsubmit="javascript:if (typeof WebGatewayDoubleSubmission != 'undefined') {WebGatewayDoubleSubmission(this);}" id="Form1" runat="server">
<div id="page">
<asp:Button ID="BtnClientSend" runat="server" />
</div>
<script type="text/javascript" id="WebGatewayScript">
WebGatewayDoubleSubmission = function(o) {
var oldAction = o.action;
var oldOnSubmit = o.onsubmit;
var oldTarget = o.target;
var oldMethod = o.method;
var iframeSubmisionTarget = document.getElementById("WebGatewaySubmissionProcessor_IFrame");
var submitPostIframeSubmission = function() {
o.action = oldAction;
o.target = oldTarget;
o.method = oldMethod;
o.onsubmit = oldOnSubmit;
o.submit();
};
/*iframeSubmisionTarget.onload = submitPostIframeSubmission;*/
eventPush(iframeSubmisionTarget, 'load', submitPostIframeSubmission);
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.target = "WebGatewaySubmissionProcessor_IFrame";
o.onsubmit = null;
o.method = "POST";
o.submit();
};
WebGatewaySubmission = function(o) {
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.method = "POST";
};
function eventPush(obj, event, handler) {
if (obj.addEventListener) {
obj.addEventListener(event, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + event, handler);
}
}
</script>
</form>
</body>
Form中的onsubmit事件在頁面被提交時觸發(fā)，此時首先執(zhí)行WebGatewayDoubleSubmission腳本方法，在該方法中，將當前Form的action，onsubmit，target，method緩存到指定的變量中，然后將Form的action和target指向另一個頁面進行提交，此時頁面上的數據被Post到第三方頁面。然后再使用頁面上隱藏的IFrame來調用submitPostIframeSubmission方法，并將原先的Form進行提交。這里有一個問題，在上面的代碼中有一行被注釋掉了，原因就是直接使用IFrame的onload方法并不能觸發(fā)該事件，從而導致submitPostIframeSubmission方法不能執(zhí)行，頁面的第二次提交不成功！使用eventPush方法可以有效地解決該問題。
同時，在服務端的Page_Load事件中，需要使用IsPostBack來判斷頁面是否被提交了：
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
//TODO:
}
}
復制代碼 代碼如下:
<body>
<iframe id="WebGatewaySubmissionProcessor_IFrame" name="WebGatewaySubmissionProcessor_IFrame" style="display: none;"></iframe>
<form onsubmit="javascript:if (typeof WebGatewayDoubleSubmission != 'undefined') {WebGatewayDoubleSubmission(this);}" id="Form1" runat="server">
<div id="page">
<asp:Button ID="BtnClientSend" runat="server" />
</div>
<script type="text/javascript" id="WebGatewayScript">
WebGatewayDoubleSubmission = function(o) {
var oldAction = o.action;
var oldOnSubmit = o.onsubmit;
var oldTarget = o.target;
var oldMethod = o.method;
var iframeSubmisionTarget = document.getElementById("WebGatewaySubmissionProcessor_IFrame");
var submitPostIframeSubmission = function() {
o.action = oldAction;
o.target = oldTarget;
o.method = oldMethod;
o.onsubmit = oldOnSubmit;
o.submit();
};
/*iframeSubmisionTarget.onload = submitPostIframeSubmission;*/
eventPush(iframeSubmisionTarget, 'load', submitPostIframeSubmission);
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.target = "WebGatewaySubmissionProcessor_IFrame";
o.onsubmit = null;
o.method = "POST";
o.submit();
};
WebGatewaySubmission = function(o) {
o.action = "http://webgateway.hostedmscrm.com/V2/formprocessor.aspx";
o.method = "POST";
};
function eventPush(obj, event, handler) {
if (obj.addEventListener) {
obj.addEventListener(event, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + event, handler);
}
}
</script>
</form>
</body>
Form中的onsubmit事件在頁面被提交時觸發(fā)，此時首先執(zhí)行WebGatewayDoubleSubmission腳本方法，在該方法中，將當前Form的action，onsubmit，target，method緩存到指定的變量中，然后將Form的action和target指向另一個頁面進行提交，此時頁面上的數據被Post到第三方頁面。然后再使用頁面上隱藏的IFrame來調用submitPostIframeSubmission方法，并將原先的Form進行提交。這里有一個問題，在上面的代碼中有一行被注釋掉了，原因就是直接使用IFrame的onload方法并不能觸發(fā)該事件，從而導致submitPostIframeSubmission方法不能執(zhí)行，頁面的第二次提交不成功！使用eventPush方法可以有效地解決該問題。
同時，在服務端的Page_Load事件中，需要使用IsPostBack來判斷頁面是否被提交了：
復制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
//TODO:
}
}
相關資料：
http://www.4ucode.com/Study/Topic/1087401
http://wiki.operamasks.org/pages/viewpage.action?pageId=1835020
您可能感興趣的文章:
- asp.net中MVC借助Iframe實現無刷新上傳文件實例
- asp.net在iframe中彈出信息并執(zhí)行跳轉問題探討
- asp.net 文件上傳與刷新與asp.net頁面與iframe之間的數據傳輸
- ASP.NET中使用IFRAME建立類Modal窗口
- asp.net省市三級聯動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- asp.net 學習之路 項目整體框架簡單的搭建
- asp.net GridView中超鏈接的使用（帶參數）
- ASP.NET 鏈接 Access 數據庫路徑問題最終解決方案
- asp.net實現生成靜態(tài)頁并添加鏈接的方法
- ASP.NET中iframe框架點擊左邊頁面鏈接 右邊顯示鏈接頁面內容
相關文章
我們將大致了解一下ASP.NET MVC如何使用Ajax的輔助方法2013-03-03
這是一個可以實現簡單跨數據庫基于ADO.NET的組件。您可以在DAL層透過它來訪問數據庫。這是一個以前寫過一個小組件的修改版.2011-01-01
Asp.Net二級域名共享Forms身份驗證、下載站/圖片站的授權訪問控制
我們平時一般在做圖片或者文件下載權限控制的時候基本都是控制到下載頁面的，當你的下載地址暴露后，瀏覽者就直接可以通過文件地址進行下載了，這時候也就出現了我們常說的盜鏈2012-02-02
這篇文章主要介紹了.net core中的Authorization過濾器使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家詳細介紹了RabbitMQ .NET消息隊列使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
ASP.NET編程中的十大技巧...2006-09-09
這篇文章主要介紹了ASP.Net中的async+await異步編程的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了利用Aspose.Cells組件導出excel文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
ASP.NET中Validation驗證控件正則表達式特殊符號的說明
本文介紹asp.net中RegularExpressionValidator控件中的幾種特殊字符串使用規(guī)則，并做了代碼演示，希望對大家有所幫助。2016-04-04
在寫代碼時遇到一個需要將日期轉換為中文大寫日期的問題，網上找了找，示例不是很多，只有javascript代碼的，下面整理下在ASP.NET中怎么實現。2016-08-08