2

我在将 jQuery 事件绑定到 gmail 'body' 时遇到问题

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

访问 IMDB.com（例如）并在 Google Chrome 开发者控制台中粘贴上述代码。当您点击页面时，您可以在控制台上看到“输入的功能”。

但是当我对 gmail 进行同样的尝试时，我收到以下消息：

TypeError: Object #<HTMLBodyElement> 没有“on”方法

gmail是怎么回事，我该如何解决这个问题？

编辑 ：-

非 JQuery 版本：

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

就像评论者指出的那样，Gmail 没有加载 jQuery，这是一个非 jQuery 版本，当你点击 gmail 时它可以工作，但是当你点击一个链接时（打开一封包含一些链接的电子邮件）它不会工作了。

4

4 回答 4

4

大多数 DOM 事件，包括 click 事件，按如下方式调度：

  1. 捕获阶段（从document( window, document, document.documentElement, ...)沿着树向下到单击的元素）。
  2. 冒泡阶段（从树上被点击的元素到document ...,window）。

与 jQuery 绑定的事件总是在 #2 中触发，在冒泡阶段。Gmail 似乎绑定了一个事件添加捕获阶段，并event.stopPropagation();在用户单击<a>元素时调用。此方法停止事件的传播，因此 jQuery 永远不会知道该事件，因为 #2 永远不会发生。

所以，放弃 jQuery 并使用 vanilla JavaScript 来绑定事件：

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

addEventListener通过设置to的第三个参数true，监听器在捕获阶段被触发。

关于 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。如果你想访问一个特定的 jQuery 库版本，你需要加载它，这样你就可以在你的扩展中访问它。

于 2013-04-12T21:16:42.800 回答
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
  }]
}

脚本.js

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

这会显示收件箱页面上的消息，以及任何消息和其他页面的内部。

于 2013-04-13T00:39:14.337 回答