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

Question

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

jqueryhtmljquery-uiiframejquery-ui-dialog

45

我正在升级的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对话框实现这一目标？是否会有任何陷阱？

- Salman A

能够查看您最终成功的代码将是非常棒的。非常感谢。 - pal4life

3个回答

50

有多种方法可以实现这一点，但我不确定哪种是最佳实践。第一种方法是您可以在对话框容器中动态添加一个带有给定链接的 iFrame：

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

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

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

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

- omerkirk

对于（i），如果我关闭对话框然后打开另一个链接会发生什么？我的担忧是这些链接是包含视频的HTML页面。如果关闭对话框只是意味着iframe被隐藏但存在于DOM中，那么视频将继续播放（并发出声音）并占用浏览器资源。 - Salman A

1

对于(ii)，是一个包含Flash或嵌入式YouTube视频的HTML页面，本身也是Flash。需要自己检查。在这种情况下，同源策略是否重要？ - Salman A

2

在第二种情况下，同源策略很重要，所以我会选择第一种方法。UI对话框有一个onclose事件。因此，您可以在那里执行任何需要从DOM中删除的内容或任何需要处理已加载内容的操作（例如：$（“#iframe-id”）.remove()）。 - omerkirk

第二个选项主要用于您自己的内容，可以使用ajax从同一域请求，但在您的情况下不太可行。 - omerkirk

@omerkirk：谢谢，我正在尝试第一种方法；事实上，通过钩入关闭事件，我已经接近成功了。 - Salman A

“append” 不应是我的首选，考虑至少两次打开相同的对话框。我建议使用“html”或“innerhtml”。 - Decebal

0

虽然这是一篇旧帖子，但我花了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演示

- mmuzahid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salman A · Accepted Answer

问题如下：

iframe内容来自另一个域
需要为每个视频调整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");
    });
});

这里是演示，这里是代码。还有另一个类似的例子。