如果我们有一些图片在页面上显示为缩略图，当用户点击图片时，页面会使用任何 JavaScript 或 JQuery 方法显示完整的图片。
我们如何改变浏览器 url 地址以指向图片而不是主页网站，同时保持用户在当前页面上。
例如：
例如，如果我们访问任何 Instagram 帐户
当我们点击任何照片时，脚本会将浏览器中的地址 url 更改为
http://instagram.com/p/ReTycBy2Bj/
例如
我们怎样才能做到这一点？
感谢您的帮助
【问题讨论】：
标签： javascript jquery html
您可以通过在支持的浏览器上使用history.pushState() 方法来操作浏览器历史记录来实现这一点。详情请见https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries。
【讨论】：
这是一个可以解决我的问题的脚本示例
在查看 +lshearer 答案并开始搜索“pushState”后，我在搜索时发现了这个 url http://html5.gingerhost.com/seattle，它帮助我了解如何在不加载内容的情况下更改浏览器地址栏的 URL。
<html>
<head>
<title>some title</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<script>
$( document ).ready(function() {
// Handler for .ready() called.
var original_url = window.location.pathname;
$("#show").click(function() {
href = "picurlhere.jpg";
// HISTORY.PUSHSTATE
history.pushState('sss', 'New URL: '+href, href);
});
$("#close").click(function() {
// HISTORY.PUSHSTATE
history.pushState('sss', 'New URL: '+original_url, original_url);
});
});
</script>
<body>
<button id="show">showpic</button>
<button id="close">closepic</button>
<pre></pre>
</body>
</html>
我在 FireFox 25+、Chrome 31+ 上测试过
而且它有效。
当我点击“showpic”按钮时，脚本会将网址更改为“picurlhere.jpg”，当我点击返回“closepic”按钮时，它将返回原始页面网址。
这将有助于我们在使用 JQuery 或 JavaScript 方法显示图像时更改浏览器 url，因为如果用户复制链接并将其发送给任何人，它将指向图片 url 而不是网站页面。这正是在 instgram 上使用的。
但在实际演出中你必须让这个脚本更智能。
感谢您的帮助。
【讨论】：
无需使用任何脚本，只需简单的 HTML。像这样包装你的图像：
<a href="http://instagram.com/p/ReTycBy2Bj/"><img src="your-image.jpg" alt=""></a>
【讨论】：