ASP.NET页面借助IFrame提交表单数据所遇到问题的解决方法分享
更新时间：2021年9月22日 10:19 点击：1812
首先看下面的代码片段，我们希望用户在点击页面上的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:
}
}
复制代码 代码如下:
<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
相关文章
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标，我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按...2015-10-23
- <iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口)，需要的朋友参考下吧...2016-04-22
javascript动态的改变IFrame的高度实现自动伸展
动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩 原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面)，添加JavaScript...2013-10-13- 这篇文章主要介绍了jQuery取得iframe中元素的常用方法,结合实例形式详细分析了jQuery针对iframe中元素获取技巧及注意事项,需要的朋友可以参考下...2016-01-15
JavaScript实现iframe自动高度调整和不同主域名跨域
这篇文章主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下...2016-03-01- 这篇文章主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31
- 这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16
- 在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面小编通过本文给大家详细介绍下，对js iframe滚动条相关知识感兴趣的朋友一起学习吧...2016-11-22
- 防止远程提交表单是一个防止黑客非法远程提交数据来给我们网站造成安全，下面我来介绍在php中防止远程非法提交表单实例。 具体方法 一、PHP防止站外提交数据的方法...2016-11-25
- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证-提交表单，对javascript表单验证，提交表单相关知识感兴趣的朋友一起学习吧...2016-03-22
Ajax+FormData+javascript实现无刷新表单信息提交
在前端开发中ajax，formdata和js实现无刷新表单信息提交非常棒，接下来通过本文给大家介绍Ajax+FormData+javascript实现无刷新表单信息提交的相关资料,需要的朋友可以参考下...2016-10-25- 这篇文章主要介绍了微信jssdk在iframe页面失效问题的解决措施 的相关资料,需要的朋友可以参考下...2016-03-07
- 防止站长提交表单无非就是对每一次打开表单或提交数据都会需要加一个token来进行验证了，这个其实与验证码做法没什么两样了，下面来看几个防止站外远程提交表单的例子。...2016-11-25
php中IE7 iframe session丢失问题解决方案
本文章来给在家介绍在php中IE7 iframe session丢失问题解决方案，有碰到此类问题的同学可进入参考参考 假设采用iframe方式，很可能会遇到这样的问题。而且这个问题只...2016-11-25ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例
下面小编就为大家分享一篇ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22PHP关于IE下的iframe跨域导致session丢失问题解决方法
今天搞的一个登录页面，被别的网站用iframe嵌进去后，死活无法登录（只在IE中存在这种情况）。 很明显，session无法被保存。但是直接在地址栏打开那个登录页面，一切都正常啊。真是奇怪啊。 在网上搜索了一下。发现这个问题...2013-10-13python自动化测试selenium定位frame及iframe示例
这篇文章主要为大家介绍了python自动化测试selenium定位frame及iframe示例的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助...2021-11-13- 这篇文章主要介绍了开发一个封装iframe的vue组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-03-26
- 以jQuery插件开发的方法开发。具体代码如下：jQuery.fn.extend({ /** * ctrl+enter提交表单 * @param {Function} fn 操作后执行的函数 * @param {Object} thisObj 指针作用域 */ ctrlSubmit:function(fn,thi...2015-10-21
- 本文我们来讲讲另外一种网站注入攻击方式，PNG图像元数据中iFrame注入攻击，这个也是本人最近接触，以前没有注意过，或许也有很多站长不清楚，现在分享出来。 我们一直在努...2016-11-25