0

我正在尝试在我的 Javascript 中获得一个非常基本且简单的对话框，实际上我正在尝试从 jqueryui 网站复制与此示例非常相似的内容：

<script type="text/javascript">
   $(function() {
           $("#dialog").dialog({
                   bgiframe: true,
                   height: 140,
                   modal: true
           });
   });
   </script>

<div class="demo">
 <div id="dialog" title="Basic modal dialog">
   <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
 </div>

...

为了实现这一点，我运行了一个函数 testJQ 但我无法获得预期的效果。添加了 div 及其内部 p，我可以看到 p 的内容，但看不到“基本模式对话框”，也无法在页面上移动它。我错过了什么吗？这是我的代码：

function testJQ() {
   var doc = jetpack.tabs.focused.contentDocument;
   var win = jetpack.tabs.focused.contentWindow;

   $.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js",
function(js) {

   var script = doc.createElement("script");
   script.innerHTML = js;
   doc.body.appendChild(script);

   $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js",
   function(js) {

           var script = doc.createElement("script");
           script.innerHTML = js;
           doc.body.appendChild(script);

       $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css",
    function(js) {

           var style = doc.createElement("style");
           style.innerHTML = js;
           doc.getElementsByTagName('HEAD')[0].appendChild(style);

           var script = doc.createElement("script");
           script.innerHTML = js;
           doc.body.appendChild(script);

           script = doc.createElement("script");
           script.innerHTML += '$(function() {';
           script.innerHTML += '$("#dialog").dialog({'
           script.innerHTML += '      bgiframe: true, height: 140, modal: true';
           script.innerHTML += '  });';
           script.innerHTML += '});';
           doc.body.appendChild(script);

           divDialog =  doc.createElement("div");
           divDialog.setAttribute('id', 'dialog');
           divDialog.setAttribute('title', 'Basic Dialog');
           divDialog.innerHTML = '<p>This is the default dialog which is useful
 for displaying information. The dialog window can be moved, resized
 and closed with the X icon.</p>';
           doc.body.appendChild(divDialog);
           });
        });
    });
 }
4

2 回答 2

0

在插入对话框本身的 div之前，您将插入调用 jQuery 对话框的脚本。因此$("#dialog")不匹配任何元素，因此dialog()对空包装器的调用静默不执行任何操作。

您可以在一个简单的 HTML 页面中解决此问题，因为您正在使用$(function)注册一个onready仅在加载整个文档后才调用的函数。但是在 Jetpack 版本中，整个文档已经加载，因此插入onready脚本会立即调用它。

如果这是您要插入内容的任意第三方文档，那么您应该非常小心。将像 jQuery&UI 这样的大型库加载到一个不期望它的任意页面（而不是您要定位的一个特定页面）有点粗鲁并且可能很脆弱。另外，如果文档已经定义了一个带有 id 的元素，会发生什么dialog？如果它的样式规则导致对话框以意想不到的方式呈现怎么办？等等。

于 2010-01-15T09:46:37.667 回答
0

我已经解决了我的问题（当然，在 Jetpack 中可能有更好、更简单、更优雅的方法来实现这一点，但我还没有发现）：

function testJQ() {
var doc = jetpack.tabs.focused.contentDocument;
var win = jetpack.tabs.focused.contentWindow;

$.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js", function(js) {

var script = doc.createElement("script");
script.innerHTML = js;
doc.getElementsByTagName('HEAD')[0].appendChild(script);

$.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", function(js) {

    var script = doc.createElement("script");
    script.innerHTML = js;
    doc.getElementsByTagName('HEAD')[0].appendChild(script);

    $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css", function(js) {

    var style = doc.createElement("style");
    style.innerHTML = js;
    doc.getElementsByTagName('HEAD')[0].appendChild(style);

    script = doc.createElement("script");
    script.innerHTML += 'var myDialogFunc = function () {';
    script.innerHTML +=  '$("<div id=dialog title=\\"Basic Dialog\\"> <p>The dialog window can be moved, resized and closed with the X icon.</p></div>").appendTo("body");';
    script.innerHTML += '$("#dialog").dialog({'
    script.innerHTML += '      bgiframe: true, height: 140, modal: true';
    script.innerHTML += '  });';
    script.innerHTML += '};';
    doc.body.appendChild(script);
    win.wrappedJSObject['myDialogFunc']();      
    });
});
});
}
于 2010-01-15T14:44:52.817 回答