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

Detecting a form.submit() performed via JavaScript

本文关键字：form submit 执行 JavaScript 检测      更新时间：2023-09-26

在我的页面中有一个属于同一域的框架。这个框架的内容是多种多样的，而且相对难以预测。每当用户单击执行发布的按钮(在框架内)时，我都需要执行执行一些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);
});

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

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

对我有效的解决方案来自我的一个朋友。解决方案是填充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/

相关文章：