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

问题描述

我正在升级的Web应用程序使用jQuery和jQuery UI。我用jQuery UI对话框替换了大多数 window.open 和< a target = _blank> 的实例。例如，用于在新窗口中打开的条款和条件;现在我使用带有AJAX的jQuery UI对话框。为了保持一致性，我打算尽可能使用它。

一个这样的地方是一个页面，我可以通过外部链接来观看视频。例如：

 < a href =http://website.com/videos/1.htmltarget = _blank>< img src =http://website.com/videos/1.png>< / a> 
< a href =http://website.com/videos/2.htmltarget =_ blank>< img src =http://website.com/videos/2.png >< / A> 
  

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

解决方案

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

  $（＃dialog ）.append（$（< iframe />\").attr(\"src，your link））。dialog（{dialogoptions}）; 
  

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

  $（＃dialog）。load（yourajaxhandleraddress.htm）。dialog（{dialogoptions}）; 
  

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

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>

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?

解决方案

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});

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屋！