gpt4 book ai didi

javascript - 添加按钮以关闭面板

转载 作者:太空宇宙 更新时间:2023-11-04 16:27:11 24 4
gpt4 key购买 nike

我想添加一个关闭按钮来关闭出现在浏览器中的面板。为此,我有一个 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 并显示内容的代码。我的问题是:如何添加按钮来关闭面板?

最佳答案

  1. 向您的面板添加一个按钮。
  2. 点击时,self.port.emit 一些消息告诉您的 main.js 代码隐藏面板。
  3. 收到消息后,调用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>

提示.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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com