Question

现在我有一个用fancybox打开的iFrame内容。当它打开时，它会更新URL地址以匹配iFrame URL。关闭时，它将返回上一个URL。问题是在iFrame中我有导航键在帖子之间。这样做不会更新URL地址，就像它已关闭和打开一样。有什么方法可以实现这个目标吗？

代码是：

JS

$(".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.html。但是，如果您导航到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

下载整个软件包

Answer 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>

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

$("a.lala").click(function() { 当用户点击下面的链接时，使用＆＃34; lala＆＃34;类。

var cenas = $(this).attr('href');创建一个名为＆＃34; cenas＆＃34;检索链接href=""

中的内容

window.top.history.pushState("string", "Title", cenas);使用var＆＃34; cenas＆＃34;更新父网址，即href。

为每个人欢呼。

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

1 个答案: