我想添加一个关闭按钮来关闭浏览器中显示的面板。为此，我有一个 javascript 文件，它启动 prompt.html 文件，即我的面板。
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 添加节点并显示内容的代码。我的问题是:如何添加一个按钮来关闭面板？
最佳答案
- 向面板添加一个按钮。
- 单击时，
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();
提示.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");
});
关于javascript - 添加按钮以关闭面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24632069/