15

iframe を使用する Web サイトがあります。iframe 自体が Web サイトのコンテンツです。iframe で jQuery ダイアログを使用したいと思います。ただし、それを使用すると、オーバーレイとダイアログは親ではなく iframe 内にのみ表示されます。私の親htmlには、ダイアログ用に定義された次のhtmlがあります。

<div id="modalHolder"></div>

私の iframe では、次の JavaScript を使用してダイアログを作成し、表示しています。

dlg1 = $(window.parent.document.getElementById("modalHolder"));
dlg1 = dlg1.dialog({
    width: 300,
    height: 150,
    modal: true,
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    draggable: false,
    overlay: 
    {
        backgroundColor: 'red',
        opacity: 0.65
    },
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

ダイアログを表示するには、これを使用します：

dlg1.dialog('open');
4

2 に答える 2

26

シンプルで優雅な解決策があります：

  1. jquery と jqueryui を親ウィンドウに含める
  2. この後、iframe内の親JQueryオブジェクトにアクセスできます

例えば：

var $jParent = window.parent.jQuery.noConflict();
var dlg1 = $jParent('#modalHolder');
dlg1.dialog();
于 2011-02-19T16:45:45.167 に答える
3

ダイアログ関数は iframe のコンテキスト内で実行されるため、常にダイアログ div (半透明の背景 div やダイアログ div など) を iframe の子として作成します。親ドキュメントから要素を取得していても、実際のスクリプトは iframe で実行されています。Firefox と Firebug を使用している場合は、HTML インスペクタを使用して何が起こっているかを確認できるはずです。

私は2つの解決策しか考えられません：

  1. jQuery ダイアログ ライブラリの変更されたバージョンを使用します。これはまったくお勧めしません
  2. 親ドキュメントのコンテキスト内で実行されるように JavaScript を移動します。
于 2009-12-24T16:46:05.463 に答える