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

现在我有一个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时，它会用你正在命名的页面更新浏览器的URL，在本例中是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

如果每个人都遇到这个问题，我已经找到了解决这个问题的方法。基本上，在每个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"的var来检索链接的href="" 中的内容

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

为大家干杯。

相关内容

最新更新

热门标签：