检测通过 JavaScript 执行的 form.submit()答案

【问题标题】：Detecting a form.submit() performed via JavaScript检测通过 JavaScript 执行的 form.submit()
【发布时间】：2014-07-23 15:29:20
【问题描述】：

在我的页面中有一个属于同一个域的框架。这个框架的内容是多种多样的，并且相对不可预测。每当用户单击执行帖子的按钮（在框架内）时，我都需要执行一个执行某些 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);
});

【问题讨论】：

标签： javascript forms http-post

【解决方案1】：

在 iframe 的 onload 事件中，您需要将事件侦听器连接到 iframe 页面中的每个表单。您需要在每次加载时都这样做，因为每个新页面都需要新的侦听器。

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

【讨论】：

你的代码对我不起作用，你看到我在这个例子中做错了什么吗？ jsfiddle.net/hW6Z4 两个按钮都应该触发警报，但只有一个是。 JavaScript 提交未被捕获。
您可以覆盖表单的操作，然后在您运行自己的代码后触发该操作：var oldAction = $(this).attr('action'); $(this).attr('action','javascript:alert("##")');
这几乎就是我正在做的事情，对我来说，问题是如果单击提交按钮时表单调用了 javascript，我不知道该 javascript 是否调用了 form.submit() 或不是。我想知道是否可以确定。

【解决方案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/

【讨论】：