Question

我有一个通过fancybox iframe访问的页面设置。如何在iframe的父窗口中加载fancybox iframe内的链接？因此，如果用户单击该链接，它将重新加载页面并加载单击的链接。如何添加目标=＆＃34; _top＆＃34;归属于所有链接？

e.g。

$("iframe").on("load", function () {
    $("a").each(function() {
      $(this).attr('target', '_top');
   });
})

Answer 1

假设您的子页面中有常规链接，例如：

<p>This link opens <a href="http://google.com">GOOGLE</a></p>
<p>This link opens <a href="http://jsfiddle.net">JSFIDDLE</a></p>
<p>This link opens <a href="http://stackoverflow.com">STACKOVERFLOW</a></p>

您可以使用fancybox onclick回调从父页面中为每个链接设置属性 afterShow。然后，将parent.location.assign()和$.fancybox.close()设置为onclick属性值。

这是您父网页的代码：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type : "iframe",
        afterShow : function () {
            $(".fancybox-iframe").contents().find("a").attr("onclick", "parent.location.assign(this.href);parent.$.fancybox.close();")
        }
    });
}); // ready

现在，iframed页面上的每个链接都将关闭fancybox并在父（顶部）页面中加载引用的URL。

注意：

我们需要在this.href方法中传递.assign()，该方法对应于每个链接的href值。
我们不需要在子页面中包含jQuery。
使用iframe受Same-origin policy

请参阅演示： http://www.picssel.com/playground/jquery/openURLfromChildPage_13apr14.html

Answer 2

如果您使用的是Fancybox 3，则需要稍微修改一下这个版本：

jQuery(document).ready(function ($) {
    $("[data-fancybox]").fancybox({
        type : "iframe",
        onComplete : function () {
            $(".fancybox-iframe").contents().find("a").attr("onclick", "parent.location.assign(this.href);parent.$.fancybox.close();")
        }
    });
});

添加这个额外的答案，因为这个线程是关于搜索中出现的唯一近乎有用的东西。我觉得值得更新当前版本的Fancybox。

将target =“_ top”添加到fancybox iframe内的墨迹

2 个答案: