2

jQuery イベントを gmail の「本文」にバインドする際に問題が発生しています

$('body').on('click', function(event) {
        console.log("Entered function");
});

IMDB.com (たとえば) にアクセスし、Google Chrome 開発者コンソールに上記のコードを貼り付けます。ページをクリックすると、コンソールに「入力された機能」が表示されます。

しかし、gmail で同じことを試みると、次のメッセージが表示されます。

TypeError: オブジェクト #<HTMLBodyElement> にはメソッド 'on' がありません

Gmail で何が起こっているのですか? また、これを回避するにはどうすればよいですか?

編集 ：-

JQuery 以外のバージョン:

document.addEventListener("click", function() {
   console.log("Entered function");
}, false);

コメンターが指摘したように、jQuery は Gmail に読み込まれていません。これは jQuery 以外のバージョンです。gmail をクリックすると機能しますが、リンクをクリックすると (いくつかのリンクが含まれる電子メールを開くと)、機能しません。もう働け。

4

4 に答える 4

4

クリック イベントを含むほとんどの DOM イベントは、次のようにディスパッチされます。

  1. キャプチャ フェーズ ( document( window、document、document.documentElement、...)からツリーの下のクリックされた要素まで)。
  2. バブル フェーズ (クリックされた要素からツリーのdocument ...、 までwindow)。

jQuery にバインドされたイベントは、常に #2 のバブリング フェーズでトリガーされます。Gmail は、イベントの追加キャプチャ フェーズをバインドし、ユーザーが要素をevent.stopPropagation();クリックすると呼び出します。<a>このメソッドはイベントの伝播を停止するため、#2 が発生しないため、jQuery はイベントについて知ることはありません。

したがって、jQuery をドロップして、vanilla JavaScript を使用してイベントをバインドします。

document.addEventListener('click', function(event) {
    // Do whatever you want
}, true);

の 3 番目の引数をaddEventListenertotrueに設定すると、キャプチャ フェーズでリスナーがトリガーされます。

jQuery エラーについて (質問から):
Gmail は jQuery を読み込まないため、使用できません。通常、ReferenceError: "$ is not defined" が発生します。代わりに、「TypeError: Object # has no method 'on'」が表示されました。これは、ページで が宣言されていない場合に Chrome の開発者ツールで の$短縮形として定義されているためです。document.querySelector$

拡張機能に jQuery を含めた場合は、適切なコンテキストに切り替えることで使用できます。詳細については、jQuery が Facebook に読み込まれないのはなぜですか? を参照してください。

于 2013-04-13T20:35:10.650 に答える
1

gmail が何をロードしているのか調べてみたところ、gmail が jquery をロードしていないようです。

于 2013-04-12T21:13:30.020 に答える
1

それで私はそれをテストしました、そしてそれはうまくいきます。コメントで述べたように、すべての場合に jQuery を自分で注入する必要があります。ページの JavaScript にも、他の拡張機能の JavaScript にもアクセスできません。いくつかのコード例:

マニフェスト.json

{
  "name": "Gmail jQuery Test",
  "version": "0.1",
  "description": "Gmail jQuery Test",
  "manifest_version": 2,
  "permissions": [
    "https://mail.google.com/*"
  ],
  "content_scripts": [{
    "matches": ["https://mail.google.com/*"],
    "js": ["jquery.js", "script.js"],
    "all_frames": true
  }]
}

script.js

$('body').on('click', function(event) {
  console.log("Entered function");
});

これにより、受信トレイ ページ、およびメッセージと他のページの内部にメッセージが表示されます。

于 2013-04-13T00:39:14.337 に答える