Question

我正在编写一个chrome扩展程序，当用户单击上下文菜单时会向页面添加弹出窗口。我正在使用activeTab权限执行此操作，将脚本注入到获取所选文本的页面上，对其执行一些操作，并将信息添加到页面上的浮动div。这个div是一个jQuery UI对话框。

问题在于，由于activeTab的工作方式，我的脚本无法保持任何状态 - 每次单击上下文菜单时，脚本都会重新注入并重新运行。如果我不关闭对话框，我可以毫无困难地添加内容。但是如果我关闭对话框，我希望能够重用已经创建的对话框，我无法弄清楚如何去做。

以下是一些代码：

// Creating the dialog
function createDialog() {
  if (!$('#language_study_dialog').exists()) { // exists() just checks length>0
    console.log("Dialog not created; creating now");
    $('body').append('<div id="language_study_dialog" title="Language Study">'
        + '</div>');
    $('#language_study_dialog').dialog({position:
        {my: "left top", at: "left top"}
    });
  }
  $('#language_study_dialog').dialog("open");
}

// Because I don't have any state, I need to call this every time; I don't
// know if the dialog has been created already or not.
// `selection` is defined elsewhere
createDialog();
$('#language_study_dialog').append("<p>Word: " + selection + "</p>");

如果我运行这个脚本两次，而没有在其间关闭对话框，那么事情就可以正常工作 - 文本会按预期附加，现在额外的元素会被添加到DOM中。但是，如果我在连续执行此脚本之间关闭对话框，则会收到错误（cannot call methods on dialog prior to initialization）。

另一方面，如果我在上面的$('#language_study_dialog').dialog();中调用dialog("open")而不是createDialog，那么事情大部分都有效，但每次调用该函数都会将jQuery UI对话框添加到DOM中而且有时候会出现多个对话框。

是否有一个函数调用只是重新初始化现有的jQuery对话框？我想我的替代方法是删除除了关闭内部文本之外的所有内容，并且只保存一个隐藏的div，每次运行脚本时我都会重新创建一个对话框。有更好的选择吗？

Answer 1

好的，我想通了，至少有一种方法可以做到。可能还有更好的方法，但这很有效。

我无法保留任何本地状态，因为每次单击上下文菜单时都会重新执行脚本。因此var dialog = $('#language_study_dialog').dialog()之类的东西不起作用 - 每次运行脚本时dialog都会重置。但是，我可以将内容存储在window中。所以工作代码如下所示：

function createDialog() {
  if (window['dialog'] == undefined) {
    console.log("Dialog not created; creating now");
    $('body').append('<div id="language_study_dialog" title="Language Study">'
        + '</div>');
    window['dialog'] = $('#language_study_dialog').dialog({position:
        {my: "left top", at: "left top"}
    });
  }
  window['dialog'].dialog("open");
}

重用现有的jQuery UI对话框

1 个答案: