jquery下控制iframe页面form提交的问题备忘

最新推荐文章于 2020-04-18 08:17:51 发布

zebrawoods

最新推荐文章于 2020-04-18 08:17:51 发布

阅读量1w

点赞数

分类专栏：备忘文章标签： iframe jquery function button triggers input

本文链接：https://blog.csdn.net/zebrawoods/article/details/4854766

版权

备忘专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先有两个页面，暂且设为A和B。B是A的子页面，即A的iframe中是B，A中除了一个iframe还有一个from这个form的id为frm：
这是A：

<body> <form action="" method="post" id="frm" class="test"> <input type="text" /> <input type="submit" value="submit" /> </form> <button>othersubmit</button> <iframe id="sup" src="supindex.html" mce_src="supindex.html" width="100%" height="100%" hspace="0" vspace="0" frameborder="yes" border="0" MARGINWIDTH="0" MARGINHEIGHT="0" allowtransparency></iframe> </body>

这是B：

<body> <button>supsubmit</button> </body>

A中js：

$(document).ready(function(){ //alert(frm == $('#frm')[0]); $('#frm').submit(function(){ alert('$(#frm).submit!'); return false; }); $('button').click(function(){ //alert($('#frm').submit); $('#frm').submit(); //frm.submit(); }); });

B的js：

$(document).ready(function(){ $('button').click(function(){ //alert($('#frm').submit); var tt = $(window.parent.document).find('#frm'); tt.submit(); //$(window.parent.document).find('button').click(); }); });

发现问题：
1. 在A中显示已经声明$('#frm').submit的事件处理函数，但当A中执行$('button').click内的frm.submit();时，并不会执行绑定的submit事件处理函数，而是按照默认的处理方式提交表单，即使用$('#frm').submit()和frm.submit();并不相同。所以在“省厅考勤系统”中，代码如下：

$(document).ready(function(){ var triggers = $("#exportbtn").overlay({ expose: { color: '#333', loadSpeed: 200, opacity: 0.6 }, closeOnClick: false, onLoad: function(){ $('#exportFlag').val('1'); $('#'+frm.id).submit(); }, onBeforeClose: function(){ $('#exportFlag').val('0'); } }); var options = { success: function(responseText, statusText){ //alert("create seccess!"); if( $('#exportFlag').val() == '2' ) return; $('#exportFlag').val('2'); frm.submit(); } }; $('#'+frm.id).submit(function(){ //alert("start submit"); if(checkDataForJ()){ $(this).ajaxSubmit(options); }else{ $('#export button.close').click(); } return false; }); });

options内的frm.submit();并不会触发下面自定义的$('#'+frm.id).submit事件处理函数，而是正常提交了。

2. 在iframe的子页面中，无法控制父页面表单提交，即使在B中用$(window.parent.document).find('#frm').submit();也无法使用A中自定义的事件处理函数处理，而是按照默认提交方式提交，但使用$(window.parent.document).find('button').click();可正确触发在A中自定义的$('button').click()处理函数，所以有一个解决方案，即若B要提交A中表单，则在A中定义一个type="hidden"的input，为该input绑定自定义点击事件，事件中提交表单，而在B中利用A中该input的点击事件提交A中表单。