greasemonkey脚本尝试在元素存在之前访问它并获取null

Question

我使用Greasemonkey在“google.com/*”上运行小脚本 基本上我的脚本添加一些菜单项到谷歌菜单（在那里你可以找到图像视频地图新闻购物等...）;

此菜单位于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 is null”

我认为原因是脚本在页面上创建gbar元素之前运行。这是奇怪的因为我确信只有当所有内容完成加载时，油脂猴子脚本才会运行。

Answer 1

您可以设置DOM mutation event。基本上，以下是步骤：

• 执行初始搜索document.getElementById('gbar')并在找到后对其进行处理。

• 在文档上设置DOMNodeInserted事件处理程序。

  • 如果插入的元素有id="gbar"，那么您就知道插入了gbar。
  • 如果没有，请在插入的元素内搜索id="gbar"的元素，并在找到时对其进行处理。

您可以看到working example代码。当gbar添加到文档中时，它会添加5个exclaimation标记。