Question

我使用Fancybox在fancybox中显示外部html页面，例如：在page1我设置了一个链接，它在fancybox page2模式下打开iframe，并且工作正常。< / p>

问题是：

如果有人试图输入page2的网址，是否有可能让page2始终在page1内的fancybox中打开，而不是像普通网页那样在浏览器窗口中打开？< / p>

Answer 1

是的，这是可能的。

因此，第一页（parent.html）将从类似

的链接打开fancybox中的第二页（iframed.html）

<a id="openIframe" class="fancybox" href="iframed.html">Open page inside fancybox iframe</a>

注意我将ID和类设置为将打开iframed页面的链接。

然后是每个页面的脚本：

parent.html

父页面应该有两个特定的代码：

初始化fancybox的代码
用于检测网址中hash何时出现的代码，以便它可以解雇fancybox

所以：

// initialize fancybox
$(".fancybox").fancybox({
    // API options
    type: "iframe" //<== at least this one
});

if (window.location.hash) {
    // detect if URL has hash and trigger fancybox
    $(window.location.hash + ".fancybox").trigger("click");
    // remove hash after fancybox was opened 
    // two methods to cover most browsers
    if (navigator.userAgent.match(/msie/i)) {
        var loc = window.location.href;
        index = loc.indexOf('#');
        if (index > 0) {
            window.location = loc.substring(0, index);
        }
    } else {
        history.pushState("", document.title, window.location.pathname);
    };
};

然后第二页（iframed.html）应该有一个代码，用于检测是否已在iframe内打开本身（在我们的例子中fancybox iframe）。

如果没有，它应该重定向到父页面，定位打开fancybox的链接的ID，这样：

iframed.html

if (self == top) {
    window.location.href = "parent.html#openIframe";
};

注意如果页面未在iframe中打开，则self == top将返回true，以便重定向到父级。

请参阅 JSFIDDLE （并尝试在新窗口/标签中打开链接）

始终在fancyBox iframe中打开一个html页面

1 个答案:

parent.html

iframed.html