我制作了一个使用 jQuery appendTo('body') 的 Greasemonkey 脚本。
一切正常，但 HTML 还附加到其他 DOM 元素，例如我的 igoogle 页面上的 Google 广告和小工具。
有什么办法可以解决这个问题吗？我认为这个问题不需要一些示例代码。相反，我上传了一张显示我的问题的图片：
如您所见，我附加的 HTML 出现在许多不同的地方。
【问题讨论】：
appendTo($('body')[0])
标签： jquery dom greasemonkey appendto
是的，这是因为 Greasemonkey 将每个 frame 和 iframe 视为自己的页面（在某种程度上，确实如此），并作为 @include、@exclude 和/或@match 指令指示。
（请注意，没有src 属性的 iframe 被认为来自与基本页面相同的 URL。）
要阻止脚本在 iframe 上触发，请将以下代码放在脚本顶部附近：
if (window.top != window.self) //-- Don't run on frames or iframes.
return;
如果您确实想在某些 iframe 上运行而不是其他 iframe，请调整 @include、@exclude 和/或 @match 指令（如果可能），或链接到目标页面以帮助选择选择性阻止的方法iframe。
【讨论】：
您看到 HTML 附加到多个项目的原因很可能是因为您正在处理的标记中存在 iframe。
每个 iFrame（我怀疑小工具、广告都是 iFrame）都有自己的完整 HTML 结构，并带有 <html></html> 和 <body></body> 标记。当您.appendTo('body') 时，您的脚本会将内容附加到与'body' 选择器匹配的任何元素。
您需要提供比$('body') 更独特的选择器。
除了通用的body 选择器之外，您可能想要做的是尝试使用某种其他独特选择器的$('body:first')。您可能需要稍微尝试一下，因为您依赖的 HTML 不受您的控制——我假设您希望 GM 脚本在任何页面上运行——因此您受限于该页面的结构。例如，不能保证:first <body> 标签是正确的。
如果你问我，一个可靠的方法是遍历 $('body') 返回的所有 <body> 元素，并为每个元素查看它是否有一个 Iframe 的父元素。
类似的东西 -
var selectedElement = '';
$('body').each(function(index,elem){
if ($(elem).closest('iframe').length){
selectedElement = $(elem);
}
});
if (selectedElement){
// appendTo(selectedElement);
}
我正在使用.each() function 来遍历与给定选择器匹配的所有元素——在本例中为body。
我在这里使用.closest() function 导航所有父元素并找到与给定选择器匹配的祖先 - 在本例中为iframe。
【讨论】：