向下滚动单个页面时是不是可以更改 url
Posted
技术标签:
【中文标题】向下滚动单个页面时是不是可以更改 url【英文标题】:Is it possible to have the url change while you scroll down a single page向下滚动单个页面时是否可以更改 url 【发布时间】:2011-09-03 01:04:24 【问题描述】:当您使用 ajax 向下滚动单个页面时,是否可以更改 url?我有一个网站全部在一个页面上,并希望有这种效果。
示例:
www.blablabla.com/blog
用户向下滚动...
www.blablabla.com/blog/entry-name
我知道哈希...我可以屏蔽 URL 吗?
【问题讨论】:
我很想知道这是怎么回事,但我的直觉是这是一个不好的做法。因此,如果我正在查看上述 blabla 博客主页并向下滚动几篇文章,我的地址栏将动态更改,以便当我将该 URL 复制并粘贴给朋友时,他们将在相同的书签/滚动位置看到该页面? 是的,这就是我希望发生的事情。 这个最好用手指交叉... 我发现了这个:jqueryfordesigners.com/demo/scroll-link-nav.html#third 但我觉得它可能不适用于包含大量内容的页面。 我在 chrome 中检查了这一点,但在我滚动时它并没有改变 url,只是明显地改变了链接按钮 css,这很酷......我猜。 【参考方案1】:我知道这是一个较老的问题,但是浏览器发生了变化,现在,可以按照发帖人的要求去做。这意味着大多数其他答案不再有效。我发布了一种方法来实现这一点,以便它可以帮助使用谷歌的人找到正确的答案。
简而言之,在现代浏览器(支持 HTML 5 的浏览器)上您可以。请看this的文章。
基本上归结为以下代码行:
window.history.pushState("object or string", "Title", "/new-url");
执行上述代码会将 URL 更改为 example.com/new-url,并将帮助您完成您想要的。
对于演示,您可以查看使用此方法的Webby Awards。只需向上或向下滚动并查看地址即可。效果相当可观。
【讨论】:
感谢您的回答。这正是我一直在寻找的。另一个很好的例子:rollingstone.com/music/lists/15-great-albums-you-didnt-hear-in-2014-20141217【参考方案2】:您可以使用 pushState() 来修改浏览器 URL 栏中显示的 URL,而无需重新加载或使用哈希。只要您的浏览器支持 HTML5 即可。
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
【讨论】:
【参考方案3】:没有。不知道你为什么想要。
正如您所提到的,唯一的方法是将其添加到页面的哈希中,例如。
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
早就可以做到这一点。
【讨论】:
我希望这样做,以便在共享博客文章时将其定位在页面上的正确位置。 这样我就可以将该网址从 www.homepage.com/blog/#entryname 屏蔽为 www.homepage.com/blog/entryname 请查看winners.webbyawards.com/2013/online-film-video/… 或下面我的回答,然后向上或向下滚动。所以是的,这当然是可能的。再说一次,现在是 2013 年 ;)【参考方案4】:https://github.com/browserstate/history.js/history.js呢?
包括对数据、标题、replaceState 的持续支持。支持 jQuery、MooTools 和 Prototype。对于 HTML5 浏览器,这意味着您可以直接修改 URL,而无需再使用哈希。
【讨论】:
【参考方案5】:可以使用 window.pushState 方法。
【讨论】:
【参考方案6】:是的,你可以,但有点棘手。
如果您的 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
锚点的页面。
你需要做一些工作来避免太不稳定,但这是可行的。
【讨论】:
之前没有看到 @dtbarne 的答案 - 检查一下【参考方案7】:不,出于安全原因,您不能使用 javascript 更改 URL
【讨论】:
其实不刷新是不能改的。 通过更改 URL,您可以欺骗用户,让他们认为他们在一个网站上,而实际上他们不是。就像他们访问 www.blablabla.com/blog 并且您将 URL 更改为 www.yourbank.com 他们可能认为他们实际上正在查看他们的银行网站。以上是关于向下滚动单个页面时是不是可以更改 url的主要内容,如果未能解决你的问题,请参考以下文章