jQuery FancyBox关闭嵌套的iframe并跳转到父页面链接

在本文中，我们将介绍如何使用jQuery FancyBox插件关闭嵌套的iframe，并在关闭后将父页面跳转到指定链接。

什么是jQuery FancyBox？

jQuery FancyBox是一个强大的轻量级jQuery插件，用于创建漂亮的弹出框和模态窗口。它可以用于显示图片、视频、网站内容等，并提供了丰富的配置选项和强大的事件处理功能。

使用iFrame内的FancyBox

在某些情况下，我们希望在FancyBox弹出框中嵌套一个iFrame，以显示其他网页或应用程序。这对于实现复杂的功能或与其他网站进行交互非常有用。

要在FancyBox中嵌套一个iFrame，我们可以使用以下代码：

<a class="fancybox" href="iframe.html">打开iFrame内容</a>

<script>
  $(".fancybox").fancybox({
    type: "iframe",
    iframe: {
      css: {
        width: "600px",
        height: "400px"
      }
    }
  });
</script>

在上述示例中，我们使用fancybox类创建一个链接，并使用.fancybox()方法将其转换为FancyBox弹出框。通过在type选项中指定为”iframe”，我们告诉FancyBox使用iFrame类型的内容。我们还可以通过iframe选项来设置iFrame的自定义样式。

关闭iFrame并跳转到父页面链接

在某些情况下，当我们在iFrame中打开一个链接后，希望在关闭iFrame后，将父页面跳转到该链接指向的页面。这可以通过在iFrame中添加JavaScript代码来实现。

首先，在iFrame内部的页面中，我们可以使用以下代码来关闭FancyBox并指定要跳转的链接：

parent.jQuery.fancybox.close();
parent.location.href = "http://www.example.com";

在上述代码中，parent对象代表父页面的window对象，通过parent.jQuery.fancybox.close()我们可以关闭FancyBox弹出框。接下来，通过parent.location.href我们可以将父页面跳转到指定链接。

然后，我们可以将上述代码添加到我们打开的iFrame内部页面的适当位置，以在某个事件触发时关闭iFrame并跳转到父页面链接。

例如，在iFrame内部的页面中，我们可以添加一个按钮，并在按钮点击事件中执行关闭FancyBox并跳转到链接的相关代码：

<button id="closeAndRedirect">关闭并跳转</button>

<script>
  $("#closeAndRedirect").click(function() {
    parent.jQuery.fancybox.close();
    parent.location.href = "http://www.example.com";
  });
</script>

现在，当我们在iFrame内部的页面中点击”关闭并跳转”按钮时，FancyBox弹出框将关闭，并且父页面将跳转到指定链接。

注意：由于涉及到跨域的安全问题，父页面和iFrame内部页面的域名必须相同或存在合适的跨域设置。