可以使用jQuery操作XUL元素吗？

我知道在Firefox插件中集成jQuery是可能的，但是我们能够操纵（动画、移动、调整透明度等）XUL元素本身吗

---

据我所知，Firefox插件可以使用jQuery操作HTML/DOM元素，但不能确定XUL元素。

我最近也在想这个问题。显然，DHTML没有什么意义，但基本的语法糖分和其他东西据说是有效的

• jQuery组对此进行了讨论，指出它加载时出现了一些异常
• 也可以看到这篇关于你的博客文章。那个人在追求XUL中的HTML，这并不完全是您所需要的，但他确实有很好的信息

简短回答：是

长答案：

我自己也尝试过。我只能以有限的方式使用它。可以操纵XUL元素。但是我很难观察事件，因为我对jQuery还很陌生——我不知道如何调整它来观察Firefox/XUL级别的事件——我甚至不知道是否需要调整：D

示例：

overlay.xul

<?xml version="1.0"?>    
<?xml-stylesheet href="chrome://testaddon/content/overlay.css" type="text/css"?>

<overlay id="testaddon_overlay"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml">

    <script type="application/x-javascript" src="chrome://testaddon/content/jquery-1.4.2.js" />
    <script type="application/x-javascript" src="chrome://testaddon/content/overlay.js" />

    <toolbox id="navigator-toolbox">
        <toolbar toolbarname="TestAddonToolbar" class="chromeclass-toolbar">
            <toolbaritem>
                <toolbarbutton id="btnHide" label="HideMe" onclick="hideMe();" />
            </toolbaritem>            
        </toolbar>
    </toolbox>

</overlay>

上面的代码将在您单击按钮时隐藏该按钮-使用jQuery进行基本XUL操作

但正如我所说的，尝试观察文档加载和其他类似事件，它会很快变得复杂（或者我知道的不多：D）

---

更新：我尝试了一些效果。Effects.fadeIn（）可以工作，但由于XUL中的透明度属性与HTML中的设置不同，因此按钮会停留在那里，最后它会突然消失。现在，我们可以（不能）在多大程度上使用jQuery来操纵XUL变得越来越清楚了。

XUL和HTML实际上以完全相同的方式处理不透明性，而jQuery错误地检测了浏览器可以做什么。jQuery认为它在XUL内部时处于不同的浏览器中，因此不透明度效果的处理方式不同——由jQuery处理。因为它在Firefox中，通常应该处理不透明度，所以您可以这样覆盖它：

jQuery.support.opacity=true

在jQuery加载后立即执行此操作

可能有一整类类似的修复程序可以应用于jQuery，以使其性能更好，但我还没有研究过它。

现在的答案是“大部分”

基本工作，包括选择、删除和查找。我在扩展内部和扩展内容页面上大量使用1.5.2

$.ready（）也不起作用，因为jQuery假定并等待主体。这就是打破它的原因

有些东西不起作用，因为正如@Daniel所描述的，jQuery不能正确地检测它在XUL中能做什么和不能做什么（更多背景信息见下文）。通过逐步浏览jQuery代码，我发现您自己的代码中至少需要以下几行代码

// Workarounds for jQuery not properly testing support in XUL environment

// These are done at jQuery init
// This is actually critical, otherwise elements are not properly removed from the cache and you get a cache[id] is undefined
crowdmash.$.support.deleteExpando = true;

// These are done at ready(), but jQuery never fires ready in XUL
// XUL doesn't seem to support offsetWidth and offsetHeight (without this :hidden is broken which breaks fadeIn)
crowdmash.$.support.reliableHiddenOffsets = false;
crowdmash.$.support.opacity = true;

如果要在扩展的内容页上使用jQuery，请参阅my

修改1.4.4以更好地使用XUL。我还没有试过，但是从它的变化来看，它看起来确实解决了这个问题。我不知道它是否解决了支持问题

---

作为$.support问题的背景。问题是jQuery的特性检测创建了一个新的特性，然后使用innerHTML填充它。XUL div不支持innerHTML，因此支持代码无法将任何内容标记为受支持。实际上，这个问题上有一个问题是开放的，并且正在讨论1.7-。

不幸的是，jQuery无法在XUL中初始化，因为只有HTML页面才有特定于HTML的函数，如

document.body

。然而，有一个特殊的分支称为它优化用于FireFox扩展。我已经检查过了，它可以正常工作。

我的解释参考了jQuery 1.7.1

我的目标是在XUL上下文中执行淡入淡出动画，但由于jQuery错误地假设它正在处理IE，如果jQuery.support.opacity是falsy，则会抛出错误

由于无法与通过document.createElement（“div”）创建的DOM元素交互，填充支持对象的逻辑过早返回空对象。使用文档解决了我的问题。CreateElements：

createElementNS("http://www.w3.org/1999/xhtml", "div");

提出此解决方案后，我搜索了jQuery bug跟踪器，发现了以下相关问题：

jQuery没有被宣传为在XUL上下文中工作，因此团队没有解决这个问题的计划，尽管他们应该解决IE误报的问题。我满足于在我的应用程序的源代码中手动进行这一行更改

干杯，

---

Andy

在我看来，你可以找出到底发生了什么，让jQuery认为它不在Firefox中，然后覆盖它，让它认为它在Firefox中。如果可能的话，我想你可以一步解决所有这些问题。我注意到了这一点-不透明度和其他东西是无法用特定于浏览器的方法检测到的。直接检测它们（在1.4.2源代码中搜索“jQuery.support={”）-通过创建一个div元素并以各种方式对其进行操作。除了对jQuery进行修补（我将其作为练习留给读者），我所描述的方法是最快的方法，应该根据具体情况进行修补，因为XUL DOM与HTML DOM不同。感谢您的反馈。值得注意的是，问题在于查询功能检测创建一个，然后使用innerHTML填充它。XUL div不支持innerHTML，因此每个支持测试都会失败。有点扫兴，总有一天会有人修复它（利用我们丰富的空闲时间：）。同时，覆盖支持值是一个很好的技巧。谢谢。如果没有答案中列出的更改，fadeIn实际上对我不起作用。可能是jQuery版本的更改（我使用的是1.5.2）。

createElementNS("http://www.w3.org/1999/xhtml", "div");