如何在 jQuery UI 对话框中显示 IFRAME
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5660263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display an IFRAME inside a jQuery UI dialog
提问by Salman A
The web application that I am upgrading uses jQuery and jQuery UI. I have replaced most instances of window.openand <a target=_blank>with jQuery UI dialog. For example, the terms and conditions used to open in a new window; now I use jQuery UI dialog with AJAX. For consistency I plan to use it wherever possible.
我正在升级的 Web 应用程序使用 jQuery 和 jQuery UI。我已经用 jQuery UI 对话框替换了window.open和 的大多数实例<a target=_blank>。例如，用于在新窗口中打开的条款和条件；现在我使用带有 AJAX 的 jQuery UI 对话框。为了保持一致性，我计划尽可能使用它。
One such place is a page where I'll have external links to videos. Something like:
一个这样的地方是一个页面，我将在其中提供视频的外部链接。就像是：
<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>
In certain situations I might use target=iframe1. Now instead of opening the content in an iframe or a popup window, I want to display the content inside a popup dialog. How can I use jQuery UI dialog to achieve this? Will there be any gotchas?
在某些情况下，我可能会使用target=iframe1. 现在，我不想在 iframe 或弹出窗口中打开内容，而是想在弹出对话框中显示内容。如何使用 jQuery UI 对话框来实现这一点？会有什么陷阱吗？
回答by Salman A
The problems were:
问题是：
- iframe content comes from another domain
- iframe dimensions need to be adjusted for each video
- iframe 内容来自另一个域
- 需要为每个视频调整 iframe 尺寸
The solution based on omerkirk's answerinvolves:
基于omerkirk 的答案的解决方案包括：
- Creating an iframe element
- Creating a dialog with
autoOpen: false, width: "auto", height: "auto" - Specifying iframe source, width and height beforeopening the dialog
- 创建 iframe 元素
- 创建一个对话框
autoOpen: false, width: "auto", height: "auto" - 在打开对话框之前指定 iframe 源、宽度和高度
Here is a rough outline of code:
这是代码的粗略轮廓：
HTML
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
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 hereand code here. And another example along similar lines
回答by omerkirk
There are multiple ways you can do this but I am not sure which one is the best practice. The first approach is you can append an iFrame in the dialog container on the fly with your given link:
有多种方法可以做到这一点，但我不确定哪一种是最佳实践。第一种方法是您可以使用给定的链接在对话框容器中即时附加一个 iFrame：
$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
Another would be to load the content of your external link into the dialog container using ajax.
另一种方法是使用 ajax 将外部链接的内容加载到对话框容器中。
$("#dialog").load("yourajaxhandleraddress.htm").dialog({dialogoptions});
Both works fine but depends on the external content.
两者都可以正常工作，但取决于外部内容。
