为什么这个JQuery事件不会在gmail中触发?

我遇到了将Jquery事件绑定到gmail’body’的问题

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

访问IMDB.com(例如)和谷歌Chrome开发者控制台粘贴上面的代码。 单击该页面时,您可以在控制台上看到“已输入的function”。

但是当我尝试使用gmail时,我收到以下消息:

 TypeError: Object # has no method 'on' 

gmail发生了什么,我该如何解决这个问题?

编辑: –

非JQuery版本:

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

就像评论者指出的那样,JQuery没有加载Gmail,这里是一个非JQuery版本,它可以在你点击gmail时工作,但当你点击一个链接(打开一个包含其中一些链接的电子邮件)时它不会工作了。

大多数DOM事件(包括click事件)都按如下方式分派:

  1. 捕获阶段(从document windowdocumentdocument.documentElement ,…)向下到树到单击的元素)。
  2. 气泡阶段(从树上的点击元素到document ……, window )。

与jQuery绑定的事件总是在冒泡阶段在#2中触发。 Gmail似乎绑定了事件添加捕获阶段,并调用event.stopPropagation(); 当用户点击元素时。 这种方法会阻止事件的传播,因此jQuery永远不会知道事件,因为#2永远不会发生。

所以,删除jQuery并使用vanilla JavaScript来绑定事件:

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

通过将addEventListener的第三个参数设置为true ,将在捕获阶段触发侦听器。


关于jQuery错误(来自问题):
Gmail不加载jQuery,因此您无法使用它。 通常,您会得到ReferenceError:“$ is not defined”。 相反,你看到“TypeError:Object#在”上没有方法’,因为当页面没有声明$时, $被定义为Chrome开发者工具中document.querySelector的简写。

如果您在扩展中包含jQuery,则可以通过切换到适当的上下文来使用它。 有关更多详细信息,请参阅为什么jQuery不会在Facebook中加载?

我探讨了gmail加载的内容,看来gmail没有加载jquery。

并非所有网站都使用jQuery。 如果您想要访问特定的jQuery库版本,则需要加载该版本,以便在扩展中访问它。

所以我测试了它,它运行得很好。 就像我在评论中所说,你需要在所有情况下自己注入jQuery。 您无法访问该网页的JavaScript,也无法访问其他扩展程序中的任何javascript。 一些示例代码:

的manifest.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"); }); 

这会在收件箱页面以及任何邮件和其他页面内显示该消息。