web-dev-qa-db-fra.com

Comment afficher un IFRAME dans une boîte de dialogue jQuery UI

L'application Web que je mets à niveau utilise jQuery et jQuery UI. J'ai remplacé la plupart des instances de window.open et <a target=_blank> avec la boîte de dialogue jQuery UI. Par exemple, les termes et conditions utilisés pour ouvrir dans une nouvelle fenêtre; J'utilise maintenant la boîte de dialogue jQuery UI avec AJAX. Par souci de cohérence, je prévois de l’utiliser autant que possible.

Un de ces endroits est une page où je vais avoir des liens externes vers des vidéos. Quelque chose comme:

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

Dans certaines situations, je pourrais utiliser target=iframe1. Maintenant, au lieu d'ouvrir le contenu dans une iframe ou une fenêtre contextuelle, je souhaite afficher le contenu dans une boîte de dialogue contextuelle. Comment puis-je utiliser la boîte de dialogue jQuery UI pour y parvenir? Y aura-t-il des pièges?

jqueryhtmljquery-uiiframejquery-ui-dialog
44
Salman A

Cela peut être fait de différentes manières, mais je ne suis pas sûr de savoir laquelle est la meilleure pratique. La première approche est que vous pouvez ajouter un iFrame dans le conteneur de dialogue à la volée avec votre lien donné:

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

Une autre solution consisterait à charger le contenu de votre lien externe dans le conteneur de dialogue à l’aide de ajax.

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

Les deux fonctionnent bien, mais dépend du contenu externe.

49
omerkirk

Les problèmes étaient:

  1. le contenu d'iframe provient d'un autre domaine
  2. les dimensions de l'iframe doivent être ajustées pour chaque vidéo

La solution basée sur réponse d'omerkirk implique:

  • Création d'un élément iframe
  • Créer un dialogue avec autoOpen: false, width: "auto", height: "auto"
  • Spécifier la source, la largeur et la hauteur de l'iframe before ouvrir la boîte de dialogue

Voici un aperçu du code:

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

Démo ici et code ici . Et autre exemple similaire

59
Salman A