添加按钮以关闭面板答案

【问题标题】：Add button to close panel添加按钮以关闭面板
【发布时间】：2014-08-29 04:52:40
【问题描述】：

我想添加一个关闭按钮来关闭出现在浏览器中的panel。为此，我有一个javascript 文件，它启动了我的prompt.html 文件panel。

var panel = require('sdk/panel').Panel({
    width  : 400,
    height : 400,
    contentURL : self.data.url('prompt.html')
});

然后在我的prompt.html 我有以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>MyPanel</title>
        <script type="text/javascript" src="util.js"></script>
        <script type="text/javascript">
    <body class="din">
        <h1>MyPanel</h1>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>

脚本包含向div 添加节点并显示内容的代码。我的问题是：如何添加一个按钮来关闭面板？

【问题讨论】：

@KD 看起来像 Mozilla Add-On SDK。编辑：yep
看看yournewdesigner.com/css-experiments/…
嗯，据我了解，没有规定可以添加按钮来关闭面板。所有它都有一个你可以注册来处理隐藏的偶数。尝试在您的 prompt.html 中添加一个按钮，然后调用 hide() 方法并检查。
@EvilEpidemic 在您的示例中，您操作的是窗口而不是面板...
@KD 你的意思是我在 html 正文中的 div 之后添加了一个按钮？但是放在窗户里面应该不会很复杂吧？

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

【解决方案1】：

向您的面板添加一个按钮。
点击时，self.port.emit 会显示一些消息，告诉您的 main.js 代码隐藏面板。
收到消息后，拨打panel.hide()。

工作示例

`main.js`

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

var panel = require('sdk/panel').Panel({
  width  : 400,
  height : 400,
  contentURL : self.data.url('prompt.html'),
  contentScriptFile: self.data.url('prompt.js')
});

// On "close" messages from the content script...
panel.port.on("close", function() {
  console.log("asked to close");
  // hide/close the panel.
  panel.hide();
});

// Initially show the panel for testing purposes.
panel.show();

`prompt.html`

<!doctype html>
<html>
  <head>
    <title>MyPanel</title>
  </head>
  <body>
    <div>
      <a id="close_button">close</a>
    </div>
    <h1>MyPanel</h1>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
  </body>
</html>

`prompt.js`

// Wire-up an on click event listener.
document.getElementById("close_button").addEventListener("click", function() {
  // Emit a "close" message to main.
  self.port.emit("close");
});

【讨论】：

你能解释一下什么是自我吗？
self 是内容脚本中的辅助对象，例如可以使用communicate。
只是为了分隔prompt.js和prompt.html？
我没有得到那个问题...？
prompt.js 中的事件侦听器已经对单击“按钮”作出反应。该示例是一个完整的示例，可以是cfx run。