链接 iframe 以在 Lightbox 中打开答案

【问题标题】：Linking an iframe to open in Lightbox链接 iframe 以在 Lightbox 中打开
【发布时间】：2011-12-03 21:08:03
【问题描述】：

是否可以使用链接链接到在灯箱或花式框中打开的 iFrame 内容？

EG;查看我的平面设计画廊点击这里 > 灯箱显示来自不同站点的我的画廊

可能吗？我将如何在灯箱/花式框中对其进行编码？ 我知道现在可以实现 - 但无法通过我的布局实现它。

更新 - 2011 年 12 月 17 日

我正在尝试使用 fancybox 来实现，下面是我正在开发的布局的链接 - 我已经能够在不同的文档中从头开始调用相同的库/css 来实现它，所以不可能。我觉得它必须是我的其他一些内联 JavaScript 之间的一些冲突。谁能帮我弄清楚为什么我的布局无法实现 iFrame 花式框？（我知道有些 JS 和代码在布局 atm 中没有使用，但只是因为我一直在剥离它进行调试，所以我将使用所有这些代码）

Relevant link

【问题讨论】：

我认为thickbox可以为你做到这一点。
你的 tinyurl 链接失效了

标签： javascript jquery html iframe

【解决方案1】：

使用DivBox，您可以执行以下操作：

<script type="text/javascript">
  $("#link").divbox({ type: 'iframe' });
</script>

<a id="link" href="http://your.other.site">Click Here</a>

【讨论】：

【解决方案2】：

Lightbox 仅适用于图像，但您可以使用 fancybox。

有两种方法：

$.fancybox({'href':'http://www.google.com',
  'type':'iframe'
});

或：

<a href="http://www.google.com" id="linktogoogle">google</a>

jQuery(document).ready(function () {
  $("#linktogoogle").fancybox();
});

点击链接将在 iframe 中加载 google。如果您希望它在不点击的情况下加载：

 jQuery(document).ready(function () {
   $("#linktogoogle").fancybox().click();
 });

您还可以将链接可见性样式设置为隐藏。

【讨论】：

感谢您的回复，我正在尝试使用 fancybox 执行此操作，但无法正确实施。我在上面更新了我的 Q，我做错了什么？
唯一需要注意的是选择器。 ID 选择器需要以 # 开头。例如：$("#linktogoogle")

【解决方案3】：

我使用shadowbox 并执行此操作。 Download and reference in the shadowbox javascript 和 CSS。然后您可以使用以下内容查看影子框中的 iframe。 iframe 可以包含任何内容（包括 iframe）。

在你的正文中创建一个链接：

<a class="modal" href="/path/to/iframe" rel="shadowbox;height=594;width=620">Click Me!</a>

然后单击该事件，在 DOM Ready 上执行以下操作。

$(document).ready(function(){
    $('.modal').click("click", function(e){
        e.preventDefault();             // Prevent the default action
        var url = $(this).attr('href'); // Get the iFrame href
        Shadowbox.open({
            content:    url,
            player:     "iframe",
            height:     400,
            width:      510
        });
    });
});

【讨论】：

【解决方案4】：

在尝试了所有各种灯箱后，我选择了Colorbox。它是使用 jQuery 构建的，因此没有冲突。它易于实现，提供多种外观和感觉选项，并且可以根据需要轻松更改样式。

【讨论】：

同意，Colorbox 很容易设计和实现。此外，它支持（几乎）任何格式，包括视频、flash、iframe、内联内容等。

【解决方案5】：

彩盒就是其中之一！我从项目开始就在使用它，它轻量级且易于实现。

<a id="link" href="http://www.link.to.page.com">click here</a>

$("#link").colorbox({ iframe: true });

Take a look at the examples in this site.

【讨论】：