如何在jQuery UI对话框中显示IFRAME

Question

我正在升级的Web应用程序使用jQuery和jQuery UI.我已经取代了大多数情况下window.open,并<a target=_blank>与jQuery UI的对话框.例如,用于在新窗口中打开的条款和条件; 现在我使用AJAX的jQuery UI对话框.为了保持一致性,我计划尽可能使用它.

一个这样的地方是一个页面,我将有视频的外部链接.就像是:

<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对话框来实现这一目标？会不会有任何陷阱？

Answer 1

问题是:

1. iframe内容来自其他域名
2. 需要针对每个视频调整iframe维度

基于omerkirk答案的解决方案包括:

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

在这里演示和编码.还有另一个类似的例子

Answer 2

有多种方法可以做到这一点,但我不确定哪一种是最好的做法.第一种方法是您可以使用给定的链接动态地在对话框容器中附加iFrame:

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

另一种方法是使用ajax将外部链接的内容加载到对话框容器中.

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

两者都很好,但取决于外部内容.