oilmonkey腳本嘗試在元素存在之前訪問元素並獲取null

Question

我使用Greasemonkey在“ google.com/*”上運行了小的腳本
基本上我的腳本在Google菜單中添加了一些菜單項（您可以在其中找到圖片，視頻，地圖，新聞購物等...）；

該菜單位於qbar div中，因此其外觀如下：

<div id="gbar"> ...menu code ... </div>

如果您轉到Google網頁（www.google.com），則腳本的下一行可以正常工作：

var gbar = var gbar = document.getElementById("gbar");
if (qbar != null) alert("qbar exist!");
else alert("qbar is null");

此代碼警告qbar存在，這很好。

現在，如果我在google中尋找任何單詞，例如搜索“ madman”將帶您到此頁面：

http://www.google.com/#sclient=psy&hl=en&q=madman&aq=f&aqi=g5&aql=&oq=&pbx=1&fp=fd0f73886609171d

現在腳本仍然只在運行，現在它會警告“ gbar為空”

我認為原因是腳本在頁面上創建gbar元素之前正在運行。 奇怪的是，我確定只有所有內容完成加載后，油脂猴子腳本才會運行。

Answer 1

您可以設置DOM突變事件 。 基本上，步驟如下：

• 進行初始搜索document.getElementById('gbar')並進行處理（如果找到）。

• 在文檔上設置一個DOMNodeInserted事件處理程序。

  • 如果插入的元素具有id="gbar"則說明已插入gbar。
  • 如果不是，請在插入的元素內搜索id="gbar"的元素，如果找到則進行處理。

您可以看到一個有效的示例代碼。 它增加了5 exclaimation標記時gbar被添加到文檔中。