web-dev-qa-db-ja.com

jQuery UIダイアログ内でIFRAMEを表示する方法

アップグレードするWebアプリケーションは、jQueryとjQuery UIを使用しています。 window.openおよび<a target=_blank>のほとんどのインスタンスをjQuery UIダイアログに置き換えました。たとえば、新しいウィンドウで開くために使用される契約条件。現在、AJAXでjQuery UIダイアログを使用しています。一貫性を保つため、可能な限りそれを使用する予定です。

そのような場所の1つに、ビデオへの外部リンクがあるページがあります。何かのようなもの：

<a href="http://website.com/videos/1.html" target="_blank"><img src="http://website.com/videos/1.png"></a>
<a href="http://website.com/videos/2.html" target="_blank"><img src="http://website.com/videos/2.png"></a>

特定の状況では、target=iframe1を使用する場合があります。ここで、コンテンツをiframeまたはポップアップウィンドウで開くのではなく、ポップアップダイアログ内にコンテンツを表示します。 jQuery UIダイアログを使用してこれを実現するにはどうすればよいですか？落とし穴はありますか？

jqueryhtmljquery-uiiframejquery-ui-dialog
44
Salman A

これを行うには複数の方法がありますが、どれがベストプラクティスであるかはわかりません。最初のアプローチは、指定されたリンクを使用して、ダイアログコンテナにiFrameをその場で追加できることです。

$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});

もう1つの方法は、ajaxを使用して外部リンクのコンテンツをダイアログコンテナーに読み込むことです。

$("#dialog").load("yourajaxhandleraddress.htm").dialog({dialogoptions});

どちらも正常に機能しますが、外部コンテンツに依存します。

49
omerkirk

問題は次のとおりです。

  1. iframeコンテンツは別のドメインから取得されます
  2. ビデオごとにiframeの寸法を調整する必要があります

omerkirkの答え に基づくソリューションには、次のものが含まれます。

  • Iframe要素を作成する
  • autoOpen: false, width: "auto", height: "auto"を使用してダイアログを作成する
  • Iframeソース、幅、高さの指定beforeダイアログを開く

コードの大まかな概要は次のとおりです。

HTML

<div class="thumb">
    <a href="http://jsfiddle.net/yBNVr/show/"   data-title="Std 4:3 ratio video" data-width="512" data-height="384"><img src="http://dummyimage.com/120x90/000/f00&text=Std+4-3+ratio+video" /></a></li>
    <a href="http://jsfiddle.net/yBNVr/1/show/" data-title="HD 16:9 ratio video" data-width="512" data-height="288"><img src="http://dummyimage.com/120x90/000/f00&text=HD+16-9+ratio+video" /></a></li>
</div>

jQuery

$(function () {
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
    var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: "auto",
        height: "auto",
        close: function () {
            iframe.attr("src", "");
        }
    });
    $(".thumb a").on("click", function (e) {
        e.preventDefault();
        var src = $(this).attr("href");
        var title = $(this).attr("data-title");
        var width = $(this).attr("data-width");
        var height = $(this).attr("data-height");
        iframe.attr({
            width: +width,
            height: +height,
            src: src
        });
        dialog.dialog("option", "title", title).dialog("open");
    });
});

ここでデモ and code here 。そして 同様の線に沿った別の例

59
Salman A