检测通过JavaScript执行的form.submit（）

Question

在我的页面中，有一个框架属于同一域。 该框架的内容是变化的，并且相对不可预测。 每当用户单击执行发布的按钮（在框架内）时，我都需要执行执行一些UI任务的功能。 问题是，由于无法控制的原因，我无法编辑这些框架的来源。 这些按钮中的一些按钮是简单的表单提交按钮，而其他按钮则不直接提交表单，而是具有执行某些检查并可能提交的onclick处理程序。

这是问题所在：如何检测这些onclick处理程序之一是否称为form.submit（）？ 如果没有处理程序，那么显然我可以为onsubmit（）设置处理程序，但并非所有这些按钮都是如此。

到目前为止，这是我的代码：

function addEventBefore(element, type, before, after) {
  var old = element['on' + type] || function() {};
  before = before  || function() {};
  after = after || function() {};
  element['on' + type] = function () { 
    before();
    old();//I can't modify this old onclick handler
    after();
  };
}

function setup() {
  console.log('setup');
}


function takedown() {
// In this method, I want to know if old() caused a form submit
  console.log('takedown');
}

function $includeFrames(jQuery, selector) {
    return jQuery(selector).add(jQuery('iframe').contents().find(selector));
}

var a = $includeFrames($, 'input[type="submit"], input[type="button"]').each(function() {
    var elem = $(this)[0];
  addEventBefore(elem, 'click', setup, takedown);
});

Answer 1

在iframe的onload事件中，您需要将事件侦听器连接到iframed页面中的每个表单。 您需要在每次加载时执行此操作，因为每个新页面都需要新的侦听器。

$("#someIframe").on('load',function() {
    $(this).contents().find("form").each(function() {
        $(this).on('submit',function() {... your code...})
    })
}

Answer 2

对我有用的解决方案来自我的一个朋友。 解决方案是对form.submit（）函数进行填充。

$(function() {
    var el = document.getElementById('myform');
    el.submit = function(fn) {
        return function() {
            myFunctionGoesHere();
            fn.apply(this, arguments);
        };
    }(el.submit);
});

这是一个工作示例： http : //jsfiddle.net/hW6Z4/9/