Question

这是一个非常简单的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");
    });
};

Answer 1

尝试将type='button'添加到按钮，因为此属性默认为'submit'。

来自MDN，type属性：

提交：按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。

单击每次按钮重新加载面板内容和脚本

1 个答案: