Как отобразить IFRAME в диалоге пользовательского интерфейса jQuery - PullRequest
Новая
       27

Как отобразить IFRAME в диалоге пользовательского интерфейса jQuery

43 голосов
/ 14 апреля 2011

Обновляемое веб-приложение использует пользовательский интерфейс jQuery и jQuery.Я заменил большинство экземпляров window.open и <a target=_blank> на диалоговое окно jQuery UI.Например, условия, используемые для открытия в новом окне;теперь я использую диалог jQuery UI с AJAX.Для согласованности я планирую использовать его везде, где это возможно.

Одним из таких мест является страница, на которой у меня будут внешние ссылки на видео.Что-то вроде: 

<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 для достижения этой цели?Будут ли какие-нибудь ошибки?

Ответы [ 2 ]

58 голосов
/ 19 апреля 2013

Проблемы были:

  1. содержимое iframe поступает из другого домена
  2. Размеры iframe должны быть скорректированы для каждого видео

Решение, основанное на ответе Омеркирка включает в себя:

  • Создание элемента iframe
  • Создание диалога с autoOpen: false, width: "auto", height: "auto"
  • Указание источника iframe, ширины и высоты до открытия диалогового окна

Вот примерная схема кода:

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

Демо здесь и код здесь . И еще один пример в том же духе

49 голосов
/ 14 апреля 2011

Есть несколько способов сделать это, но я не уверен, какой из них лучший. Первый подход заключается в том, что вы можете добавить iFrame в контейнер диалога на лету с вашей указанной ссылкой: 

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

Другой способ - загрузить содержимое вашей внешней ссылки в контейнер диалога, используя ajax. 

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

Оба работают нормально, но зависит от внешнего контента.

...