0

私は Javascript で非常に基本的でシンプルなダイアログを取得しようとしています。実際には、jqueryui Web サイトからこの例に非常に似たものを複製しようとしています:

<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()、空のラッパーの呼び出しは何もしません。

ドキュメント全体がロードされたときにのみ呼び出される関数$(function)を登録するために使用しているため、単純なHTMLページでこれを回避できます。onreadyただし、Jetpackバージョンでは、ドキュメント全体がすでに読み込まれているため、onreadyスクリプトを挿入するとすぐに呼び出されます。

これがコンテンツを挿入している任意のサードパーティドキュメントである場合、これは非常に注意する必要があります。jQuery＆UIのような大きなライブラリを（ターゲットにしている特定のページではなく）予期しない任意のページにロードするのは少し失礼で、壊れやすい可能性があります。さらに、ドキュメントでIDを持つ要素がすでに定義されている場合はどうなりますdialogか？また、ダイアログが予期しない方法でレンダリングされる原因となるスタイルルールがある場合はどうなりますか？等々。

于 2010-01-15T09:46:37.667 に答える
0

I have solved my problem (of course there may be much better, simpler, more elegant ways of achieving this within Jetpack but I couldn't discover that yet):

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 に答える