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

时间:2013-11-22 14:21:51

标签: javascript html firefox-addon firefox-addon-sdk

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

1 个答案:

答案 0 :(得分:1)

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

来自MDNtype属性:

  
    

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