4

我在 chrome 扩展中有简单的内容脚本来捕获所有表单提交。它在按钮触发提交时起作用（参见代码），但在 jquery 调用时不起作用。它应该工作无法理解出了什么问题。

content.js
---------
jQuery("form").submit(function() {
    alert('submit hooked!: ' + $(this).serialize());
});

页：

page.html
--------
<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script language="JavaScript">
      function foo() {
        jQuery("#some_form").submit();
      }

      function foo_native() {
        document.getElementById('some_form').submit();
      }
    </script>
  </head>
<body>
    <form action="http://example.com/handler" id="some_form">
      Your name:<input type="text" name="name"><br>
      Your email:<input type="text" name="email"><br>
      <!-- This hooked -->
      <input type="submit" value="Send simple submit"><br>
      <!-- Hook not working for such calls -->
      <input type="button" value="Send jquery submit" onclick="foo()"><br>
      <input type="button" value="Send native submit" onclick="foo_native()">
    </form>
    <br>
</body>
</html>
4

1 回答 1

4

背景

这与提交事件的工作方式有关。你可以在这里用小提琴测试这个onsubmit事件：http: //jsfiddle.net/sirhc/VueEJ/

由于W3C 邮件列表中所述的历史原因，此行为是设计使然。

要解决此问题，您可能必须覆盖本机提交方法。为此，您必须将 javascript 注入页面，因为内容脚本无法访问内容窗口中的局部变量。

解决方案

我的解决方案涉及监听submit文档上的事件以进行正常的表单提交，同时还注入一个提交处理程序以手动触发submit页面上的事件。

请注意，此处的 JavaScript 方法利用了浏览器是现代 DOM 兼容浏览器这一事实。这里的某些方法在 IE 版本 8 及以下版本中不可用，但这很好，因为此代码用于 Chrome 扩展程序。我还建议不要使用 jQuery 并编写自己的序列化方法。

虽然没有要求，但我也尊重了提交处理程序event.preventDefault()。

内容.js

document.addEventListener("submit", function (e) {
  alert('submit hooked!: ' + $(e.target).serialize());
}, false);

// Remember to change this to the relative path to inject.js
injectScript( chrome.extension.getURL( "/" ), "inject.js" );

function injectScript ( aBasePath, aScriptURL ) {
  var scriptEl = document.createElement( "script" );
  scriptEl.src = aBasePath + aScriptURL;
  scriptEl.async = false;

  (document.body || document.head || document.documentElement)
  .appendChild( scriptEl );
}

注入.js

HTMLFormElement.prototype._nativeSubmit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function () {
  var submitEvent = document.createEvent("HTMLEvents");
  submitEvent.initEvent("submit", true, true);
  if (this.dispatchEvent(submitEvent)) {
    this._nativeSubmit.apply(this, arguments);
  }
};

manifest.json（待补充，这不是整个文件）

"web_accessible_resources": [ "inject.js" ]

对清单的添加允许将inject.jsJavaScript 文件注入页面。

参考

于 2012-10-23T18:59:11.383 回答