ASP.NET页面借助IFrame提交表单数据所遇到的问题
2011-10-25 15:30
357 查看
首先看下面的代码片段，我们希望用户在点击页面上的Button时首先将数据提交到指定的第三方页面，然后再执行后台的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事件在页面被提交时触发，此时首先执行WebGatewayDoubleSubmission脚本方法，在该方法中，将当前Form的action，onsubmit，target，method缓存到指定的变量中，然后将Form的action和target指向另一个页面进行提交，此时页面上的数据被Post到第三方页面。然后再使用页面上隐藏的IFrame来调用submitPostIframeSubmission方法，并将原先的Form进行提交。这里有一个问题，在上面的代码中有一行被注释掉了，原因就是直接使用IFrame的onload方法并不能触发该事件，从而导致submitPostIframeSubmission方法不能执行，页面的第二次提交不成功！使用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
<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事件在页面被提交时触发，此时首先执行WebGatewayDoubleSubmission脚本方法，在该方法中，将当前Form的action，onsubmit，target，method缓存到指定的变量中，然后将Form的action和target指向另一个页面进行提交，此时页面上的数据被Post到第三方页面。然后再使用页面上隐藏的IFrame来调用submitPostIframeSubmission方法，并将原先的Form进行提交。这里有一个问题，在上面的代码中有一行被注释掉了，原因就是直接使用IFrame的onload方法并不能触发该事件，从而导致submitPostIframeSubmission方法不能执行，页面的第二次提交不成功！使用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页面借助IFrame提交表单数据所遇到问题的解决方法分享
- ASP.NET页面借助IFrame提交表单数据所遇到问题的解决方法分享
- Asp.net MVC 2 中解决页面提交数据并发问题
- 在 Asp.net MVC 2 中解决页面提交数据并发问题
- asp.net mvc利用Json验证数据和导向页面，解决重复提交问题
- Asp.net MVC 2 中解决页面提交数据并发问题
- 【ASP.NET 问题】System.InvalidOperationException: 对象的当前状态使该操作无效 【大量表单数据提交】错误解决
- Asp.net MVC 2 中解决页面提交数据并发问题
- ASP.NET\ASP.NET MVC表单提交遇到的问题结论
- 使用WebClient自动填写并提交ASP.NET页面表单的源代码
- Asp.net 解决表单提交之后 页面刷新会再次提交表单
- 防止asp.net页面多次提交数据
- Asp.Net模拟表单提交数据和上传文件的实现代码
- ASP.NET MVC 3.0：基于Ajax的表单提交，A页面认证失败后页面被强转至登录页面，待登录成功将如何回到A页面？
- 使用WebClient自动填写并提交ASP.NET页面表单 (zt)
- ASP.NET(ASPX)页面获取form表单提交元素的值
- asp.net页面提交数据取的HtmlInputHidden控件值的中文为乱码
- asp.net 中的回车键提交表单的问题
- ASP.NET多个用户控件回车提交表单问题