是否可以使用 jQuery 来操作 XUL 元素？

Question

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

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

Answer 1

简短回答：是的

长答案：

我自己尝试过。我只能以有限的方式使用它。 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>

overlay.js

function hideMe()
{
    $('#btnHide').hide();
}

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

但正如我所说，尝试观察文档加载和其他此类事件，它会很快变得复杂（或者我不太了解：D）。

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

Answer 2

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

jQuery.support.opacity = true

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

可能有一整类类似的修复可以后应用到 jQuery 以使其表现更好，但我还没有研究过。

Answer 3

我最近自己也在想这个。显然 DHTML 没有意义，但传言说基本的语法糖和东西可以工作。

• 有来自 jQuery 组的 jQuery on XUL 讨论表明它加载时会出现一些异常。
• 另请参阅这篇关于jQuery and DHTML in XUL 的较新的博客文章。该人正在寻找 XUL 中的 HTML，这并不完全是您所需要的，但他确实有很好的信息。

Answer 4

现在的答案是“大部分”。

基本的东西都有效，包括选择、删除和查找。我在扩展程序内部和扩展程序的内容页面上都大量使用 1.5.2。

$.ready() 也不起作用，因为 jQuery 假定并等待一个主体。这是破坏它的commit。

有些东西不起作用，因为正如@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，请参阅我的tips。

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

作为 $.support 问题的背景。问题是 jQuery 的特征检测创建了一个然后使用 innerHTML 填充它。 XUL div 不支持 innerHTML，因此支持代码无法将任何内容标记为受支持。实际上有一张关于 1.7 的票已开放并正在讨论中 - http://bugs.jquery.com/ticket/5206。

Answer 5

我的解释是指 jQuery 1.7.1。

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

填充 support 对象的逻辑由于无法与通过 document.createElement( "div" ) 创建的 DOM 元素交互而过早返回一个空对象.使用 document.createElementNS 解决了我的问题：

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

想出这个解决方案后，我搜索了 jQuery bug tracker 并找到了以下相关票证：http://bugs.jquery.com/ticket/5206

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

干杯， 安迪

Answer 6

不幸的是，jQuery 无法在 XUL 中初始化，因为像 document.body 这样的 HTML 特定函数仅适用于 HTML 页面。然而，有一个名为jQuery-xul 的特殊分支对其进行了优化，以便在 FireFox 扩展中使用。我已经检查过了，它工作正常。