在使用 AJAX 的情况下,当您滚动页面时是否可以更改 URL?我有一个全部在单个页面上的网站,想要使用这种效果。
举个例子:
www.blablabla.com/blog
用户向下滚动...
www.blablabla.com/blog/entry-name
我知道哈希的用途...但我能掩盖URL吗?
在使用 AJAX 的情况下,当您滚动页面时是否可以更改 URL?我有一个全部在单个页面上的网站,想要使用这种效果。
举个例子:
www.blablabla.com/blog
用户向下滚动...
www.blablabla.com/blog/entry-name
我知道哈希的用途...但我能掩盖URL吗?
我知道这是一个比较老的问题,但是浏览器已经发生了变化,现在可以实现提问者所请求的功能。这意味着大多数其他答案不再有效。我发布一种方法来完成这个任务,希望可以帮助那些使用谷歌寻找正确答案的人。
简而言之,在现代浏览器(支持HTML 5的浏览器)中,您可以实现此功能,请参考此文章。
它基本上可以归结为以下代码:
window.history.pushState("object or string", "Title", "/new-url");
执行上述代码将更改URL为example.com/new-url,并帮助您实现所需的功能。
您可以查看Webby Awards进行演示,该方法已被使用。只需向上或向下滚动并查看地址栏即可。效果非常令人印象深刻。
如果您的浏览器支持HTML5,您可以使用pushState()方法来修改浏览器URL栏中显示的URL,而无需重新加载或使用哈希。
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
不。我不确定为什么您要这样做。
正如您所提到的,唯一的方法是将其添加到页面的哈希中,例如:
http://www.website.com/blog/#entry-name
if (window.location.indexOf("#") > 0) {
var entry_id = window.location.substring(window.location.indexOf("#"));
$('html, body').animate({
scrollTop: $(entry_id).offset().top
}, 2000);
}
编辑:现在使用window.history.pushState
已经可以实现这个功能。
可以使用 window.pushState 方法实现。
关于https://github.com/browserstate/history.js/history.js怎么样?
它包括对数据、标题和replaceState的持续支持。支持jQuery、MooTools和Prototype。对于HTML5浏览器,这意味着您可以直接修改URL,而无需再使用哈希。
可以,但有点棘手。
如果您在 index.html
页面上有这个:
<a id="link-to-later" href="#later">Go to later</a>
<p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p>
<a id="later" name="later">Some later anchor</a>
点击顶部链接将带您到下面的锚点,而无需重新加载页面,URL 将为 index.html#later
。
通过使用 window.onscroll
事件,您可以将事件挂钩到用户向下滚动页面。事件处理程序可以包括类似于 $('#link-to-later').click()
的内容,这将使用户的浏览器指向页面上的 later
锚点。
您需要做一些工作来避免这种情况过于卡顿,但这是可行的。
出于安全原因,您不允许使用JavaScript更改URL。