Question

我知道可以在Firefox插件中集成jQuery，但是我们能够操纵（动画，移动，调整透明度等）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（）有效 - 但由于透明属性在XUL中与HTML相比设置不同，因此按钮保持在那里，最后，它突然消失。现在越来越清楚我们能够（不能）使用jQuery来操纵XUL。

Answer 2

XUL和HTML实际上以完全相同的方式处理不透明度，并且jQuery错误地检测了浏览器可以执行的操作。当jQuery生活在XUL中时，jQuery认为它位于不同的浏览器中，因此不透明效果的处理方式不同 - 通过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是假的，jQuery错误地认为它正在处理IE。

填充支持对象的逻辑由于无法与通过 document.createElement（“div”）创建的DOM元素进行交互而过早地返回空对象。我的问题通过使用 document.createElementNS ：

解决了

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

在提出此解决方案后，我搜索了jQuery错误跟踪器并找到了以下相关的票证：http://bugs.jquery.com/ticket/5206

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

干杯，安迪

Answer 6

不幸的是，由于仅针对HTML页面存在的document.body等特定于HTML的函数，jQuery无法在XUL中初始化。但是，有一个名为jQuery-xul的特殊分支，它已针对FireFox扩展进行了优化。我检查过，它运作正常。

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

6 个答案: