这是一个非常简单的Firefox插件:
Widget
添加到插件栏Panel
附加到Widget
Panel
的内容包含input
元素和2 button
s 当我点击Widget
时,会显示Panel
,如预期的那样
但是当我点击testButton
时,console.log('loaded');
会被打印到控制台
为什么即使我没有更新Panel,Panel
的内容和脚本也会重新加载?
另一个测试用例(具有相同的行为),如果我在inputField
中输入一个值,然后点击testButton
,则inputField
的值将重置为空。
插件代码,main.js
:
require("./Panel").init();
模块,Panel.js
:
var Panel = require("sdk/panel"),
Data = require("./Data")
Widget = require("./Widget");
exports.init = function(){
ui = Panel.Panel({
width: 180,
height: 180,
contentURL: Data.get("html/Presentation.html"),
contentScriptFile: Data.get("js/Logic.js"),
onShow: function() { console.log("showing"); }
});
Widget.init(ui);
}
另一个模块Widget.js
:
var widget = require("sdk/widget"),
Data = require("./Data");
exports.init = function(panel) {
widget.Widget({
id: "test-widget",
label: "PanelTest",
contentURL: Data.get("images/ico.png"),
panel: panel
});
}
最后一个模块,Data.js
:
var data = require("sdk/self").data;
exports.get = function(content) {
return data.url(content);
}
面板的contentURL,Presentation.html
:
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form>
<table>
<tr>
<input id="inputField" type="text" size="10"></input>
</tr>
<tr>
<td>
<button id="testButton">Test</button>
</td>
</tr>
<tr>
<td>
<button id="evaluate">evaluate</button>
</td>
</tr>
</table>
</form>
</body>
</html>
面板的contentScriptFile,Logic.js
:
window.onload=function(){
console.log('loaded');
var button = document.getElementById("evaluate");
button.addEventListener("click", function() {
console.log("evaluate clicked");
});
};
答案 0 :(得分:1)
尝试将type='button'
添加到按钮,因为此属性默认为'submit'
。
来自MDN,type
属性:
提交:按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则这是默认值。