1

我正在编写一个 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，每次运行脚本时我都会将它重新制作成一个对话框。有更好的选择吗？

4

1 回答 1

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");
}
于 2013-04-17T01:25:02.523 回答