爲什麼不在gmail中觸發這個JQuery事件？

我有約束力的一個jQuery事件問題Gmail的「身體」爲什麼不在gmail中觸發這個JQuery事件？

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

訪問IMDB.com（對於EG）和谷歌瀏覽器開發者控制檯貼在上面的代碼。當您點擊頁面時，您可以在控制檯上看到「輸入的功能」。

但是當我嘗試使用Gmail一樣，我得到以下信息：

TypeError: Object #<HTMLBodyElement> has no method 'on'

這是怎麼回事與Gmail，以及如何解決此問題？

編輯： -

非JQuery的版本：

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

像評論者所指出的那樣，jQuery是沒有加載與Gmail，這裏是一個非JQuery的版本，當你點擊Gmail中它的工作原理，但是當你點擊一個鏈接（打開一個包含鏈接的電子郵件）時，它不再起作用。

來源

2013-04-12 jason

Gmail是否真的使用jQuery？ –

您更新的事件偵聽器假定該事件實際上將其設置爲文檔級別。這可能是gmail中的一件事情，它阻止了事件的發生，並且阻止它向文檔冒泡。 – PaulProgrammer

@jason在你的[前一個問題（http://stackoverflow.com/questions/15868627/clicking-a-link-in-gmail-doesnt-trigger-my-jquery-event-what-can-i-do- to-fix-i），我說（在評論中）你必須使用addEventListener和capture = true。第三個觀點必須是真實的，才能在捕獲階段聽取事件。 –

大多數DOM事件，包括點擊事件分派如下：

捕獲階段（從document^{（window，document，document.documentElement，...）}在樹中所點擊的元素）。
氣泡階段（從樹上點擊的元素到document^...，window）。

使用jQuery綁定的事件總是在冒泡階段在＃2中觸發。 Gmail似乎綁定了事件添加捕獲階段，並在用戶單擊<a>元素時調用event.stopPropagation();。這個方法停止了事件的傳播，所以jQuery永遠不會知道事件，因爲＃2永遠不會發生。

所以，下降jQuery和使用香草JavaScript來綁定事件：

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

截至addEventListener的第三個參數設置爲true，聽者在捕獲階段觸發。

關於jQuery的錯誤（從問題）：
Gmail不會加載jQuery的，所以你不能使用它。通常，你會得到ReferenceError：「$未定義」。相反，你看到了「類型錯誤：對象＃有‘上’沒有辦法」，因爲$被定義爲在Chrome的開發工具document.querySelector的簡寫，當頁面沒有聲明$。

如果包括了jQuery的您的擴展，它可以通過切換到適當的上下文中使用。有關詳細信息，請參閱Why will jQuery not load in Facebook?

來源

2013-04-13 20:35:10

我探討了什麼gmail加載，看來gmail不加載jquery。

來源

2013-04-12 21:13:30 PaulProgrammer

並非所有的網站都使用jQuery。如果您想訪問特定的jQuery庫版本，則需要加載該版本，以便您可以在擴展中訪問它。

來源

2013-04-12 21:16:42

你實際上總是需要加載你自己的。 Chrome擴展程序無法訪問網頁上的任何JavaScript，包括圖書館。這意味着一個網站是否使用jQuery並不重要。 – BeardFist

當然，我從其他瀏覽器擴展中獲取Jquery。但是，如果您將Jquery加載到IMDB中的控制檯並嘗試，您應該能夠重新創建它上面的錯誤消息。 – jason

所以我測試了它，它工作得很好。就像我在評論中所說的，你需要在所有情況下自己注入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"); 
});

這顯示了收件箱頁面上的信息，以及任何消息和其他頁面的內部。

來源

2013-04-13 00:39:14 BeardFist

爲什麼不在gmail中觸發這個JQuery事件？

回答

相關問題