如何在jQuery UI对话框中显示IFRAME
我正在升级的Web应用程序使用jQuery和jQuery UI。 我用jQuery UI对话框取代了window.open和<a target=_blank>大多数实例。 例如，用于在新窗口中打开的条款和条件; 现在我使用AJAX的jQuery UI对话框。 为了一致性，我打算尽可能使用它。
一个这样的地方是一个页面，我将有video的外部链接。 就像是：
<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或popup窗口中的内容，我想显示在popup对话框内的内容。 我怎样才能使用jQuery UI对话框来实现呢？ 会有什么问题吗？
有多种方法可以做到这一点，但我不确定哪一个是最佳做法。 第一种方法是用给定的链接在对话框容器中附加一个iFrame：
$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
另一种方法是使用ajax将外部链接的内容加载到对话框容器中。
$("#dialog").load("yourajaxhandleraddress.htm").dialog({dialogoptions});
两者都正常工作，但取决于外部内容。
问题是：
- iframe内容来自另一个域
- iframe尺寸需要针对每个video进行调整
基于omerkirk的答案的解决scheme包括：
- 创build一个iframe元素
- 用
autoOpen: false, width: "auto", height: "auto"创build一个对话框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"); }); });
在这里演示和代码在这里 。 另一个例子沿着类似的路线
