如何在 jQuery UI 对话框中显示 IFRAME [英] How to display an IFRAME inside a jQuery UI dialog

问题描述

我正在升级的 Web 应用程序使用 jQuery 和 jQuery UI.我已经用 jQuery UI 对话框替换了 window.open 和 的大多数实例.例如，用于在新窗口中打开的条款和条件；现在我使用带有 AJAX 的 jQuery UI 对话框.为了保持一致性，我计划尽可能使用它.

The web application that I am upgrading uses jQuery and jQuery UI. I have replaced most instances of window.open and <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.

一个这样的地方是一个页面，我将在其中提供视频的外部链接.类似的东西:

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>

在某些情况下，我可能会使用 target=iframe1.现在，我不想在 iframe 或弹出窗口中打开内容，而是想在弹出对话框中显示内容.如何使用 jQuery UI 对话框来实现这一点?会有什么问题吗?

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?

推荐答案

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

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:

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

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

Another would be to load the content of your external link into the dialog container using ajax.

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

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

Both works fine but depends on the external content.

这篇关于如何在 jQuery UI 对话框中显示 IFRAME的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！