8

我正在尝试在使用新 SDK 的附加组件中定位我的面板。

我看到文档只显示了一种控制面板位置的方法，那就是在您使用时传递一个锚点show()：

节目（主播）

显示面板。[锚：手柄]

页面中一个 DOM 节点的句柄，面板应该锚定到该节点。如果没有给出，面板将在最近的浏览器窗口中居中。请注意，目前无法仅使用高级 API 以这种方式锚定面板。

理想情况下，我希望锚点成为单击该小部件时面板显示为锚定的小部件，但该小部件不是，DOM node in a page所以我猜不是......

我可能可以解决这个问题，但我什至找不到如何将面板锚定到 DOM 节点的工作示例。contentScript当我通过这样的方式传回一个 DOM 节点时port：

lib/main.js

  var scraper = pageMod.PageMod({
    include: ['*'],
    contentScriptWhen: 'ready',
    contentScriptFile: [data.url('jquery-1.6.2.min.js'), data.url('scraper.js')],
    onAttach: function(worker){
      worker.port.on('pageLoaded', function(page){
        widget.panel.show(page.anchor);
      }); 
    }

数据/scraper.js

$('body').append('
  <div id="anchor-to-me" style="position:fixed; bottom: 0; right: 0;">.</div>
');

var anchor = $('#anchor-to-me').get();
self.port.emit('pageLoaded', { anchor : anchor  });

我收到以下控制台错误：

error: An exception occurred.
Traceback (most recent call last):
  File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 147, in show
    let document = getWindow(anchor).document;
  File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 345, in getWindow
    let anchorWindow = anchor.ownerDocument.defaultView.top;
TypeError: anchor.ownerDocument is undefined

任何可以帮助我成功锚定到 DOM 元素或找到其他方式来定位面板的信息都会很棒。

谢谢。

4

2 回答 2

2 
const panel = require("panel").Panel({
  width: 240,
  height: 320,
  contentURL: data.url("foo.html"),
  contentScriptFile: [data.url("jquery-1.4.4.min.js"),
                      data.url("panel.js")]
});

const widget = widgets.Widget({
  id: "some-id",
  label: "Some label",
  contentURL: data.url("icon.png"),
  //panel: panel,
  onClick: function(view) { /* cool stuff */ 
     view.panel = panel;
  }
});

而不是使用mainPanel.show()，使用view.panel = mainPanel;。它将解决问题，因为我做了同样的事情。

于 2013-05-15T06:51:14.700 回答
1

当您定义您的小部件时，您可以添加一个面板属性，它是您的面板实例：

[面板：面板]

当用户单击小部件时打开的可选面板。注意：如果您还注册了“点击”侦听器，它将被调用而不是打开面板。但是，您可以通过调用 this.panel.show() 从侦听器中显示面板。

这是一个示例（不幸的是，文档中没有这样的示例）：

const panel = require("panel").Panel({
  width: 240,
  height: 320,
  contentURL: data.url("foo.html"),
  contentScriptFile: [data.url("jquery-1.4.4.min.js"),
                      data.url("panel.js")]
});

const widget = widgets.Widget({
  id: "some-id",
  label: "Some label",
  contentURL: data.url("icon.png"),
  panel: panel,
  onClick: function() { /* cool stuff */ }
});
于 2011-08-01T20:26:30.213 回答