wake-up-neo.com

Anzeigen eines IFRAME in einem Dialogfeld der jQuery-Benutzeroberfläche

Die Webanwendung, die ich aktualisiere, verwendet jQuery und die jQuery-Benutzeroberfläche. Ich habe die meisten Instanzen von window.open Und <a target=_blank> Durch das Dialogfeld der jQuery-Benutzeroberfläche ersetzt. Zum Beispiel die Geschäftsbedingungen, die zum Öffnen in einem neuen Fenster verwendet werden. Jetzt benutze ich den jQuery UI Dialog mit AJAX. Aus Gründen der Konsistenz plane ich, es wo immer möglich zu verwenden.

Ein solcher Ort ist eine Seite, auf der ich externe Links zu Videos habe. So etwas wie:

<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>

In bestimmten Situationen kann ich target=iframe1 Verwenden. Anstatt den Inhalt in einem Iframe oder einem Popup-Fenster zu öffnen, möchte ich ihn jetzt in einem Popup-Dialogfeld anzeigen. Wie kann ich den jQuery UI-Dialog verwenden, um dies zu erreichen? Wird es irgendwelche Fallstricke geben?

jqueryhtmljquery-uiiframejquery-ui-dialog
44
Salman A

Es gibt mehrere Möglichkeiten, dies zu tun, aber ich bin nicht sicher, welche die beste Vorgehensweise ist. Der erste Ansatz ist, dass Sie einen iFrame mit dem angegebenen Link im Handumdrehen in den Dialogcontainer einfügen können:

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

Eine andere Möglichkeit wäre, den Inhalt Ihres externen Links mit ajax in den Dialogcontainer zu laden.

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

Beides funktioniert gut, hängt aber vom externen Inhalt ab.

49
omerkirk

Die Probleme waren:

  1. iframe-Inhalte stammen aus einer anderen Domain
  2. iframe-Dimensionen müssen für jedes Video angepasst werden

Die Lösung basierend auf Omerkirk's Antwort beinhaltet:

  • Erstellen eines Iframe-Elements
  • Erstellen eines Dialogs mit autoOpen: false, width: "auto", height: "auto"
  • Angabe von Iframe-Quelle, Breite und Höhe vorher Öffnen des Dialogs

Hier ist eine grobe Gliederung des Codes:

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");
    });
});

Demo hier und Code hier . Und ein weiteres Beispiel in ähnlicher Richtung

59
Salman A