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

Question

我正在升级的 Web 应用程序使用 jQuery 和 jQuery UI。我已经用 jQuery UI 对话框替换了大多数 window.open 和 <a target=_blank> 实例。例如，用于在新窗口中打开的条款和条件；现在我使用带有 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's answer的解决方案涉及：

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

Demo here 和 code here。还有another example along similar lines

Answer 2

有多种方法可以做到这一点，但我不确定哪一种是最佳做法。第一种方法是您可以使用给定的链接在对话框容器中附加一个 iFrame：

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

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

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

两者都可以正常工作，但取决于外部内容。

Answer 3

虽然这是一篇旧帖子，但我已经花了 3 个小时来解决我的问题，我认为这可能对将来的某人有所帮助。

这是我的 jquery-dialog hack，用于在 <iframe> 中显示 html 内容：

let modalProperties = {autoOpen: true, width: 900, height: 600, modal: true, title: 'Modal Title'};
let modalHtmlContent = '<div>My Content First div</div><div>My Content Second div</div>';

// create wrapper iframe
let wrapperIframe = $('<iframe src="" frameborder="0" style="width:100%; height:100%;"></iframe>');

// create jquery dialog by a 'div' with 'iframe' appended
$("<div></div>").append(wrapperIframe).dialog(modalProperties);

// insert html content to iframe 'body'
let wrapperIframeDocument = wrapperIframe[0].contentDocument;
let wrapperIframeBody = $('body', wrapperIframeDocument);
wrapperIframeBody.html(modalHtmlContent);

jsfiddle demo