在附加 sdk 中刷新 contenturl答案

【问题标题】：refresh contenturl in add-on sdk在附加 sdk 中刷新 contenturl
【发布时间】：2014-12-07 21:08:47
【问题描述】：

当我单击小部件图标时，如何使用 contenturl 刷新面板？我的代码很简单：

    var data = require("sdk/self").data;

exports.main = function() {
    var panel = require("sdk/panel").Panel({
        width: 400,
        height: 560, 
        contentURL: "http://sample.com/index.html",      
    });

    panel.on("show", function() {
      panel.port.emit("show");
    });

    require("sdk/widget").Widget({
        id: "Sample",
        label: "Sample",
        contentURL: data.url("icon128.png"),
        panel:panel
    });
};

【问题讨论】：

标签： javascript firefox sdk firefox-addon firefox-addon-sdk

【解决方案1】：

在小部件点击上更改面板的contentURL，如下所示：

require("sdk/widget").Widget({
    id: "Sample",
    label: "Sample",
    contentURL: data.url("icon128.png"),
    panel:panel,
    onClick: function() {
      panel.contentURL = contentURL;
    }
});

请记住以下内容

Widget docs:

小部件 API 从 Firefox 29 起已弃用。请参阅 ui 模块进行替换。特别是，对于一个简单的按钮，请尝试使用 action button 或 toggle button API。

Panel docs:

您可以通过将按钮本身作为位置选项传递给面板的 show() 方法或其构造函数来将面板附加到切换按钮：

var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");

var button = ToggleButton({
  id: "my-button",
  label: "my button",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onChange: handleChange
});

var panel = panels.Panel({
  contentURL: self.data.url("panel.html"),
  onHide: handleHide
});

function handleChange(state) {
  if (state.checked) {
    panel.show({
      position: button
    });
  }
}

function handleHide() {
  button.state('window', {checked: false});
}

【讨论】：