Question

我想添加一个关闭按钮来关闭浏览器中显示的panel。为此，我有一个javascript文件，用于启动我prompt.html的{{1}}文件。

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>并显示内容的代码。我的问题是：如何添加一个按钮来关闭面板？

Answer 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");
});

添加按钮以关闭面板

1 个答案:

工作示例

`main.js`

`prompt.html`

`prompt.js`