如何使用getElementsByClassName函數獲取Gmail撰寫頁面中的「發送」按鈕？

Question

我正在使用JavaScript爲Chrome瀏覽器編寫Gmail擴展程序。 我試圖讓從Compose頁面使用此代碼的send按鈕元素：

SendButton = document.getElementById('js_frame').contentDocument.getElementsByClassName('T-I J-J5-Ji Bq nS T-I-KE L3')[0]; 

但後來我不斷收到一條消息說，typeof SendButton is undefined。

我該如何解決這個問題？

Answer 1

您正在查找錯誤的文檔。

Gmail的#js_frame是一個看不見的框架，它負責非UI的東西（它的身體只包含<script>標籤，FYI）。在你previous question，我已經展示瞭如何獲得一個正確的參考：

• document.getElementById('canvas_frame').contentDocument如果存在
• document如果#canvas_frame不存在，但js_frame一樣。 js_frame`用於排除Gmail域中的非Gmail頁面，例如幫助頁面。

所以，你得到doc2後（見previous answer），您需要查詢的元素上的文件：

// Paste declaration of doc2 from https://stackoverflow.com/a/14032326/938089 
// And to get the button when available 
if (doc2) { 
    sendButton = doc2.getElementsByClassName('T-I J-J5-Ji Bq nS T-I-KE L3')[0]; 
} 

Answer 2

你不能依靠類或發送按鈕的id屬性因爲每次創建撰寫字段時都會更改，甚至可能會更改每個用戶。那麼我們對按鈕知道些什麼？

• 它的innerHTML是「發送」（見腳註）
• 它與值「按鈕」
• 這是一個「撰寫新郵件」的容器，也有其他的標籤爲「內的角色屬性從「，」到「（參見腳註2）

有了這些信息，我們就可以在原生Javascript中使用一個很好的Xpath查詢來檢索我們的按鈕。

var xpath = '//div[@role="button" and text()="Send"]' 
var query = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); 
var button = query.iterateNext(); 

如果您使用的是庫作爲jQuery的，請隨時與CSS選擇[role="button"]和在前面的回答提供的過濾功能中使用它。

這可以通過將表信息添加爲父級來改善，但這應該足夠了（您可以在Developer Mozilla Introduction to Xpath中閱讀更多信息）。希望答案能夠提供良好的表現。

UPDATE：看來Gmail也堅持使用一些類有些東西（如T-I J-J5-Ji類似乎新舊版本之間共享）。然而，我不會使用它，如果其他開發人員在這個課堂上磕磕碰碰，而且你只是通過這個按鈕獲得了按鈕，他/她無法理解你所得到的東西，特別是如果沒有評論和變量名稱很差用來。

實際檢索答案的解決方案使用看起來像div > div > div > div > table div的CSS查詢選擇器;我不會出於同樣的原因使用它。另外，它讓我想起了一個不好的描述Regular Expression。你不僅爲自己編寫代碼，而且也代表自己可能不知道項目的未來。

---

^{腳註：或等同於用戶的語言。我不確定是否所有的用戶都使用英文版Gmail，但我不會做出這樣的假設。如果我是你，我會創建一個字典，其中包含最常見關鍵字「發送」的區域設置，並通過大多數關鍵字進行迭代評估。您可以遍歷的語言數量可能限於語言Gmail support。腳註2：實際上，當你按下「Compose」時，它會添加標籤「From」和「To」，但是如果你沒有立即填充它們，它們會消失，只顯示一些div與innerHTML的「收件人」和「主題」}