如何在没有实际页面刷新的情况下更新页面 html 和 url [英] How to update page html and url without actual page refresh
问题描述
我想知道是否有人可以指导我学习如何在不刷新页面的情况下更新页面 html 和 url.
I am wondering if anyone can point me in the direction of learning how to update the page html and url without refreshing the page.
是否有任何现有的 javascript 库可以处理这个问题，或者有一本涵盖这类事情的好书.
Are there any existing javascript libs that handle this or it there a good book that covers this sort of thing.
这是使用该效果的示例站点.
Here is an example site using that effect.
请注意，当该部分以及 url 发生更改时，实际的 html 会更新，同时保持平滑过渡，没有可见的页面刷新.该网站在没有 JavaScript 的情况下也能正常工作.
Notice the actual html is update when the section is changed as well as the url while maintaining a smooth transition with no visible page refresh. The site also works properly without javascript.
此外，如果有人认为使用这种方法有任何不利之处，我会全神贯注.
Also if anyone sees any downside to using this approach I am all ears.
推荐答案
有，它叫做 PushState.
这是大多数最新浏览器(不包括 Internet Explorer :P)支持的新技术.基本上它通过javascript改变地址栏.
It's a newer technology which most of the newest browsers (internet explorer excluded :P) support. Basicly it alters the adressbar through javascript.
我可能看起来没什么，但它真的很整洁！例如，通常您会通过散列 www.example.com#/contact 执行此操作.
I might seem as nothing but it's really neat! Usually you'd do this through the hash www.example.com#/contact for example.
我使用这项技术的最新项目我使用了一个名为History.js<的js插件/a> 可以判断你的浏览器是否支持 PushState.
The latest project that I've used this technology I've used a js plugin called History.js whcih can determine if your browser supports PushState or not.
根据这一点，我要么将事件绑定到相关链接，该链接执行 pushstate 和一些 ajax 而不是加载新站点，要么让 <a href=""> 正常运行.
这让所有浏览器都相当高兴.
Depending on this I either bind an event to relevant links which does a pushstate and some ajax instead of loading the new site, or let the <a href=""> act normally.
That makes all browsers rather happy.
基本上我的脚本使用刷新创建与 pushstate 和 ajax 相同的结果.
Basicly my script creates the same result with refresh as with pushstate and ajax.
只是关于你的那个例子的旁注.它的制作非常巧妙:)
它通过 ajax 加载新页面并获取它的 HTML，但如果您再次浏览该页面，它会重新显示获取的结果，因此不会进行不需要的 ajax 调用.
Just a side note on that example of yours. It's quite smartly made :)
It loads new pages through ajax and gets it's HTML, but if you browse that page again it redisplay the fetched results so no unneeded ajax calls are being made.
这篇关于如何在没有实际页面刷新的情况下更新页面 html 和 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
