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/

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

2 个答案: