Question

我试图通过用户在fancybox中点击的网址链接重新加载浏览器，以便在fancybox关闭后父窗口将转到网址，但仅在点击链接时才会关闭，而不是在fancybox关闭时一般。我在fancybox中打开一个asp文件，它使用google maps api来显示交互式地图。我在点击标记时进行测试，infowindow会打开一个链接，这是一个新位置。我已经关闭了fancybox并且父窗口重新加载，但由于某种原因我无法将父位置更改为新的URL！我认为它应该起作用，因为其他一切都有效，而且让我感到困惑。

我的asp文件中使用google maps api的代码如下所示：

    var contentstring = document.createElement("div");
    contentstring.innerHTML = '<div id=\"content\">'+
'<div id=\"siteNotice\">'+'</div>'+
'<div id=\"bodyContent\">'+'<b>'+'<a href=\'http://www.lookathawaii.com/proddetail.asp?prod=96816-DIAMOND-HEAD-STATE-MONUMENT\' onclick=\"parent.$.fancybox.close(); parent.location.assign(\'http://www.lookathawaii.com/proddetail.asp?prod=96816-DIAMOND-HEAD-STATE-MONUMENT\'); parent.location.reload(true); return true\">'+'Diamond Head State Monument, Park and Trail'+'</a>'+'</b>'+'</div>'+
'</div>';

    contentstring.className = "map-popup";
    contentstring.style.height = "60px";
    var infowindow = new google.maps.InfoWindow({content: contentstring});
    google.maps.event.addListener(marker9, 'click', function() {
       infowindow.open(map,marker9);
    });

我注意到的另一个奇怪的事情是，虽然我在fancybox $ .ready函数中创建了afterClose构造，但当我强制fancybox与父级关闭时，它并没有被调用。$ .fancybox.close（）但它如果我正常关闭fancybox，会被调用。我应该补充说，上面的代码是在我的asp文件的head部分而不是body中调用的。我整晚都在黑客攻击这件事，但我仍然没有看到错误。我非常感谢能帮助您实现这一目标。

总而言之，fancybox中关闭并重新加载新网址的调用是：

    parent.$.fancybox.close();
    parent.location.assign(new-url);
    parent.location.reload(true);

但出于某种原因，fancybox关闭并使用现有/旧网址重新加载父级。

编辑 - 我刚刚注意到在谷歌浏览器中，调用了回调函数afterClose（），但是在IE11中它没有被调用。对于这两种浏览器，fancybox关闭并重新加载，但它们都不会分配新的URL。这是我想使用fancybox而不只是一个新窗口弹出窗口的主要原因。

我也忘了提及，我正在http://www.lookathawaii.com/proddetail.asp?prod=96815-THE-FAT-GREEK点击＆＃34;地图＆＃34;选项卡然后单击地图图像（然后将地图拖向西北方向，这样您就可以看到东南方向的钻石头，然后点击钻石头中间的标记，查看infowindow弹出窗口，其中包含应该采取的链接用户到我的钻石头页）。还有一件事，fancybox从我正在测试的网址中调用：

    <a href="maps/96815-test1.asp?prod=96815-THE-FAT-GREEK&lat=21.284329&lng=-157.836873" class="fancybox fancybox.iframe">

Answer 1

我通过对原始代码进行了非常小的更改解决了这个问题。我用原来的3个电话：

    parent.$.fancybox.close();
    parent.location.assign(new-url);
    parent.location.reload(true);

基于我读到的很多人在这里说的。但是，我学到的是，调用'reload（true）'并不是必需的，并且实际上由于某种原因会混淆。当我测试这个订单时：

    parent.location.assign(new-url);
    parent.$.fancybox.close();

它完美运行并使用新网址重新加载父窗口！所以我在我的内容字符串中做了那么简单的改变，它再次完美地工作了！现在我已经创建了一个包含少量测试位置的地图，用户可以从地图上访问我网站上的任何位置（在IE11和Chrome中测试）。

我不确定为什么建议的前3个调用不起作用，可能是浏览器问题，但是必要的两个调用是'assign（new-url）'和'close（）'确切的顺序。关闭fancybox后，浏览器将自动刷新，而不会调用'reload（）'。

Answer 2

您可能需要在父页面中创建一个临时元素，并从子（iframed）页面中定位该元素的ID，所以请尝试

在您的父页面中：

var tempRedirect; // we'll use this var to store the URL coming from the iframe
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type : "iframe",
        beforeShow : function () {
            // we create a temp element inside fancybox so it will be removed along
            $(".fancybox-wrap").append($("<span />", {
                    id : "tempRedirect", // <== the selector we'll target from iframe
                    style : "display:none; position:aboslute;lef:-999px;" // not visible
                }));
        },
        beforeClose : function () {
            // capture the content of our temp element (may be empty if closed normally)
            tempRedirect = $("#tempRedirect").html();
        },
        afterClose : function () {
            // validate if the variable is empty, otherwise redirect
            if (tempRedirect != "") {
                window.location.href = tempRedirect;
            };
        }
    });
}); // ready

现在，在您的子页面上：

jQuery(document).ready(function ($) {
    // bind a click event to your selector (marker)
    $(".child_link").on("click", function (e) {
        e.preventDefault();
        $("#tempRedirect", top.document).append(this.href); // target the element on parent page
        parent.jQuery.fancybox.close(); // close fancybox on parent
    }); // on
}); // ready

由于您要为标记创建变量contentstring，因此您可能更喜欢将脚本放在函数中并在onclick内调用href作为参数，但您可以从上面的代码中了解大局。

请参阅picssel.com上的 DEMO

备注：

DEMO使用fancybox v2.x。

据我所知，它适用于IE7 +，Firefox，Chrome，Opera和Safari。

应该在父页面和子页面上加载jQuery。

使用iframe受same origin policy
的约束

parent.location.assign（url）无法使用fancybox iframe

2 个答案: