2

我正在使用 Addon Builder 开发一个 Firefox 插件。我在我的插件面板中使用 JQuery UI，并且还想从绑定到面板的内容脚本中使用它。在面板页面中一切正常。在内容脚本中，JQuery 似乎可以工作，但我看不到 JQuery UI 调用的任何影响，例如下面的滑块案例。

这是定义面板的main.js的一部分：

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panel.js")
        ]
});

这是触发自定义事件的调用：

panel.port.emit("loadingDataEvent", t );

在panel.js中，以下部分尝试使用 JQuery 和 JQuery UI。JQuery 调用已成功完成，但是尝试更新滑块对象的 JQuery UI 调用对任何内容都没有任何影响：

self.port.on("loadingDataEvent", function (t) {
    $("#load-counter").html("<br />Not enough data yet. Approx. " + t + " secs. to go...");
    $( "#progressbar" ).progressbar( "option", "value", (60-t)/60*100 );
    document.defaultView.postMessage('{}', '*');
});

在我的panel.html 中，我可以通过以传统方式包含 JQuery 和 JQueryUI 来毫无问题地使用它们：

<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
 ...
<script>
  $(function() {
    $( "#tabs" ).tabs();
    ....
  });
</script>

关于我可能在哪里犯错的任何想法？

4

1 回答 1

5

找到答案的时间比我预期的要短得多。我的错误是在 html 文件中的脚本标记内使用 JQuery，例如声明滑块，因此内容脚本无法访问这些对象。将所有脚本分离到不同的文件并将其添加到内容脚本将使用的脚本文件列表中，解决了问题：

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panelpage.js"), // <------ this is the new file
        data.url("panel.js")
        ]
});

编辑：

在我写了这个之后，我还发现了以下内容：一旦将 data.url("panelpage.js") 传递到 contentScriptFile 中，需要从包含它的 HTML 文件中删除对脚本文件的相应引用脚本标签之间，否则似乎会导致一些冲突。

于 2012-08-17T00:52:16.613 回答