javascript - FancyBox 无法打开外部页面的链接

Question

我遇到了 FancyBox 的问题，它可能很容易修复，但我无法弄清楚。我有一个链接，当点击链接时，我希望它打开外部页面。但问题是该链接只是刷新当前的 FancyBox，并没有打开其他页面。这是我的代码:

$("#preview-box").html('<a href="http://www.google.com" target="_blank" >Go To Original</a><iframe sandbox="allow-forms allow-scripts" src="http://www.yahoo.com" width="100%" height="100%" style="min-height: 500px;"></iframe>');

$('#preview-box').fancybox({
    autoSize: false,
    width: '80%',
    height: '80%',
    onClosed: function () {
        $("#preview-box").empty();
    },
    afterClosed: function () {
        $("#preview-box").empty();
    }
}).trigger('click');

我的问题是为什么新链接没有在新选项卡中打开并刷新当前内容，以及如何才能使其正常工作？

Answer 1

我读你的代码太快，并投票决定将你的问题作为重复问题关闭，抱歉:(

您遇到的真正问题是您处于循环中:您将 fancybox 绑定(bind)到的选择器 (#preview-box) 与 fancybox 是相同的选择器定位到...因此每次您单击 fancybox 内的链接(显示 #preview-box 的内容)时，都会在 fancybox 内再次调用相同的选择器。

你应该将代码更改为这样

$("#preview-box").html('<a href="http://www.google.com" target="_blank" >Go To Original</a>');

$.fancybox({
    href: "#preview-box",
    autoSize: false,
    width: '80%',
    height: '80%',
    afterClose: function () {
        $("#preview-box").empty();
    }
});

我删除了不必要的、过时的或有缺陷的代码，例如 iframe 和 onClosed API 选项。

参见JSFIDDLE