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()ました。

content.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 );
}

inject.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);
  }
};

マニフェスト.json（追加される、これはファイル全体ではありません）

"web_accessible_resources": [ "inject.js" ]

マニフェストに追加すると、inject.jsJavaScriptファイルをページに挿入できます。

参考文献

于 2012-10-23T18:59:11.383 に答える