Question

我在最近的项目中遇到过这个问题。我有使用php（gallery.php）的画廊页面，它有jquery fancybox来弹出画廊中的每张照片。我使用单独的页面details.php来显示fancybox中的每张照片。（deatils.php？ID = XXX）

它的工作正常，但是当用户点击每张照片时，事物是背景窗口的URL仍然是gallery.php。我想将网址更改为（gallery.php？id = xxx），以便用户可以在Facebook上分享网址。

当id传入图库页面时，我还得到了显示正确照片的代码。例如（当facebook共享链接回到gallery.php？id = xxx时，它会在fancybox中弹出正确的详细信息页面）但是当fancybox关闭url保持不变时。

我知道这听起来是正确的，但是无论如何都会在fancybox弹出时屏蔽或更改网址。请帮忙......

Answer 1

你可以使用history.pushState()，但写作时支持不是很好。

更兼容的方法是使用哈希window.location.hash。

在每张图片的回调中，你可以做...

function() {
   window.location.hash = index;
}

...其中index是当前图像的索引。

对于下一个或上一个按钮，

更新 Fancybox doesn't appear to have a callback，但您可以将其破解。您可以将点击处理程序分别附加到按钮$('#fancybox-right')和$('#fancybox-left')。

然后在页面加载时，因为你已经设置了GET参数，你可以做...

var fragment = window.location.hash.substring(1);

if (fragment) {
   window.location = 'details.php?id=' + fragment;
}

这样，如果有人向其他人提供了链接http://example.com/gallery.php#4，则他们的浏览器（如果他们启用了JavaScript）会将其带到http://example.com/details.php?id=4。

Answer 2

我通过使用我自己的一些技巧刷新另一个表单来解决这个问题：D这样用户就不会分享错误的ID，因为网址只是www.myurl.com/gallery.php ... < / p>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<?php 
    $id=$_REQUEST['id']; 
    $postid=$_POST['postid']; 
    if($id!="") {
?>
<script>
   $(document).ready(function () {
      $('#testform').submit();
    });
  </script>
<?php } ?>
</head>
<body>
<?php
    echo $postid;
    echo "<form id='testform' name='testform' method='post' action='testpost.php'>";
    echo "<input type='hidden' name='postid' value='".$id."'>";
    echo "<input type='submit' value='submit'>";
    echo "</form>";
?>
</body>
</html>

使用fancybox更改父窗口的URL

2 个答案: