Fancybox - 单击 iframe 上的链接，更新 URL 地址答案

【问题标题】：Fancybox - Clicking a link on iframe, updates URL addressFancybox - 单击 iframe 上的链接，更新 URL 地址
【发布时间】：2014-11-24 04:05:07
【问题描述】：

现在我有一个 iFrame 内容正在使用 fancybox 打开。当它打开时，它会更新 URL 地址以匹配 iFrame URL。当它关闭时，它将返回到以前的 URL。问题是在 iFrame 内部，我有导航键可以在帖子之间切换。这样做不会像关闭和打开一样更新 URL 地址。有什么办法可以实现吗？

代码是：

$(".caption a").fancybox({
    type: 'iframe',
    width    : '1470px', 
    height   : '1800px', 
    transitionIn : 'fade',
    transitionOut : 'fade',
    autoScale: false,
    autoDimensions: false,
    autoSize    : false, 
    arrows    : false,
    nextClick : false,
    padding : 0,
    beforeShow: function () {
        $.cookie('window_location', window.location, { path: '/' }); 
        window.history.pushState("string", "Title", $(this).attr('href'));  
    },
    afterClose: function() {
        window.history.pushState("string", "Title", $.cookie('window_location'));   
        $.removeCookie('window_location', { path: '/' });
    }
});

HTML

<div class="caption">            
    <a href="<?php the_permalink(); ?>"></a>
</div>

编辑：

我已经创建了一个当前正在发生的事情的工作示例。 http://josemelo.net/testing/

如您所见，当您点击打开 iframe 时，它会使用您正在 iframe 构建的页面（在本例中为 iframe.html）更新浏览器的 URL。但是，如果您导航到 iframe 内的 page2，则 URL 不会更新。我要更新！所以基本上这里的目标是，每当您导航到 iframe 内的其他页面时，它都会不断更新 URL。

在http://josemelo.net/testing/里面我有一个名为index.html的文件：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="fancybox.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="fancybox-2.1.5.js"></script>
    <script src="cookie-1.4.0.js"></script>
    <script>
    $(document).ready(function() { 
        $(".fancybox").fancybox({
            type: 'iframe',
            width    : '800px', 
            height   : '600px', 
            transitionIn : 'fade',
            transitionOut : 'fade',
            autoScale: false,
            autoDimensions: false,
            autoSize    : false, 
            arrows    : false,
            nextClick : false,
            padding : 0,
            helpers: { overlay: { locked: false } },
            beforeShow: function () {
                $.cookie('window_location', window.location, { path: '/' }); 
                window.history.pushState("string", "Title", $(this).attr('href'));  
            },
            afterClose: function() {
                window.history.pushState("string", "Title", $.cookie('window_location'));   
                $.removeCookie('window_location', { path: '/' });
            }
        });
    });
    </script>
</head>
<body>
    <a href="iframe.html" class="fancybox">Click to open iframe</a>
</body>
</html>

另一个名为 iframe.html：

<!DOCTYPE html>
<head>
</head>
<body>
    <a href="page2.html">Click to go to page 2</a>
</body>
</html>

另一个名为page2.html：

<!DOCTYPE html>
<head>
</head>
<body>
    This is page 2! Wanna go back? <a href="iframe.html">Click here</a>
</body>
</html>

并链接到 fancybox js 和 css 以及 jQuery 的 cookie js。你可以在http://josemelo.net/testing/testing.zip下载整个包

【问题讨论】：

我读了 3 次你的问题，但我不太确定你在问什么？ iframe 内容是否与打开页面属于同一域？
是的。问题是，假设您正在打开一个花式框 iframe。在 iframe 中，您将浏览页面（在同一域中），即使您在 fancybox 中查看页面，URL 也会更改为这些特定页面地址。你明白吗？在我上面的代码中，每次打开fancybox 时，它都会将URL 地址更改为页面之一，即使您是通过fancybox 查看它。我想要相同的，但是在 iframe 本身内更改页面时。
对不起，但不是。尽管您导航到 iframe 内的其他页面 jsfiddle.net/hy9qe8hp，但 iframe 的 URL 永远不会改变

标签： jquery url iframe fancybox fancybox-2

【解决方案1】：

如果每个人都遇到这个问题，我已经找到了一种方法来解决这个问题并让它发挥作用。基本上，您需要在每个 iframe 页面（或者在本例中为第一个）上做的就是：

<!DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $("document").ready(function() {
        $("a.lala").click(function() {
            var cenas = $(this).attr('href');
            window.top.history.pushState("string", "Title", cenas);
        });
    });
    </script> 
</head>
<body>
    <a href="page2.html" class="lala">Click to go to page 2</a>
</body>
</html>

这基本上会将父级的 URL 更新为链接 href 中的值。

$("a.lala").click(function() { 当用户点击下面的链接时，带有“lala”类。

var cenas = $(this).attr('href');创建一个名为“cenas”的变量来检索链接的href=""中的内容

window.top.history.pushState("string", "Title", cenas); 使用 var "cenas" 更新父级的 URL，即 href。

大家干杯。

【讨论】：