如何将事件监听器添加到窗口答案

【问题标题】：How to add event listener to window如何将事件监听器添加到窗口
【发布时间】：2016-10-11 02:29:56
【问题描述】：

在我的插件中，我有一个菜单命令，可以为我的插件打开 xul 选项面板。那个 xul 窗口没有自己的 javascript。

但是，由于主脚本打开面板，主脚本如何知道用户在该窗口中单击“确定”并提交数据的时间？我想知道提交事件何时触发，以便检查“选项”窗口中设置的首选项。

基本上，我想在提交窗口时运行一个函数，但我想从主插件脚本中执行所有操作。

这是我现在拥有的。

function OpenPrefsPanel(){
    var prefpanel = window.openDialog("chrome://myaddon/content/options.xul", "", "centerscreen,chrome,modal");
    prefpanel.addEventListener("submit", function(e){  doSomething(); },false );
},

【问题讨论】：

如果您打开的窗口不是同一个域，我认为您不能这样做
嗯，两个窗口都来自我自己的插件 - 这是否意味着它们是同一个域？
仅供参考：我没有查看 Thunderbird 的选项，但在 Firefox 中，为选项窗口指定的 features 是； 'chrome,titlebar,toolbar,centerscreen,modal'.
你有窗口对象prefPanel，为什么不为close 事件添加一个监听器呢？或者观察您的附加组件的偏好？
在这些文档中，没有close 事件：w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener

标签： javascript xul thunderbird-addon

【解决方案1】：

就目前而言，您的事件永远不会触发，因为您将 'modal' 与 windowFeatures string 一起传递。这使得window.openDialog() 模态和阻塞（同步）的执行。因此，window.openDialog() 之后的第一行只会在用户单击“确定”或“取消”后执行。因此，您的 prefpanel.addEventListener() 在窗口已经关闭/关闭后执行。 MDN documentation says：

对openDialog() 的调用立即返回。如果您希望在用户关闭对话框之前阻止调用，请提供模式作为windowFeatures 参数。请注意，这也意味着用户在关闭模式对话框之前将无法与打开器窗口进行交互。

您可以选择更改打开对话框的方式，使其不是模态的：

var prefpanel = window.openDialog("chrome://myaddon/content/options.xul", ""
                                  , "centerscreen,chrome");

在这种情况下，您可以使用以下方法获取任何unload、dialogaccept 或dialogcancel 事件（在 Firefox 51.0a2 中测试）：

var prefpanel = window.openDialog("chrome://myaddon/content/options.xul", ""
                                  , "centerscreen,chrome");
prefpanel.addEventListener('load',optionsLoaded,true);
function optionsLoaded(){
    console.log('Options Window Loaded');
    //unload also fires prior to the load event, so add listener here in load handler:
    prefpanel.addEventListener('unload',optionsUnload,true);
    prefpanel.addEventListener('dialogaccept',dialogAccept,true);
    prefpanel.addEventListener('dialogcancel',dialogCancel,true);
}
function optionsUnload(){
    console.log('Options Window UNLOAD');
}
function dialogAccept(){
    console.log('Options Window dialogAccept');
}
function dialogCancel(){
    console.log('Options Window dialogCancel');
}

注意：至少在 Firefox 中，选项对话框通常使用以下windowFeatures：'chrome,titlebar,toolbar,centerscreen,modal' 打开。

但是，鉴于您的选项对话框可以从插件管理器中打开，您可能应该实施一些额外的方法来通知您您的选项已更改。这可能是preference observer，或者您的 options.xul 中包含少量 JavaScript。例如，<prefwindow> 元素具有 attributes，可用于添加在用户单击“确定”（ondialogaccept）或“取消”（ondialogcancel）时执行的代码。使用这些属性可以只需对您的 options.xul 文件进行少量更改即可完成。虽然使用 addEventListener() 通常更可取，但使用属性可能是一个合理的选择。

【讨论】：