[英]How to update page html and url without actual page refresh
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. 我想知道是否有人可以指导我学习如何在不刷新页面的情况下更新页面html和url。
Are there any existing javascript libs that handle this or it there a good book that covers this sort of thing. 是否有任何现有的javascript库可以处理这个问题,或者有一本很好的书来涵盖这类事情。
Here is an example site using that effect. 这是使用该效果的示例站点。
http://onedesigncompany.com/ http://onedesigncompany.com/
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. 请注意,当更改部分时,实际的html会更新,并且在保持平滑过渡且没有可见页面刷新的同时更新URL。 The site also works properly without javascript.
该网站也可以正常运行,无需javascript。
Also if anyone sees any downside to using this approach I am all ears. 此外,如果有人看到使用这种方法的任何缺点,我都是耳朵。
If you need to re-load a portion of a page, without reloading the entire page, I would highly recommend using jQuery.Load()
: 如果你需要重新加载页面的一部分,而不重新加载整个页面,我强烈建议使用
jQuery.Load()
:
http://api.jquery.com/load/ http://api.jquery.com/load/
With jQuery.load() you can select a div
and reload content into it from another webpage. 使用jQuery.load(),您可以选择一个
div
并从另一个网页重新加载内容。 For example: 例如:
$(".myDiv").load("/myOtherwebpage.html");
You can also specify content from a particular element on that other page: 您还可以指定该其他页面上特定元素的内容:
$(".myDiv").load("/myOtherwebpage.html .myOtherClass");
However, if you need to reload all the content from another page, and change the URL to a different page, then I would just recommend linking to that page. 但是,如果您需要从其他页面重新加载所有内容,并将URL更改为其他页面,那么我建议您链接到该页面。 Theres no performance benefit from doing this through jQuery.
通过jQuery执行此操作没有性能优势。
There is, and it's called PushState . 有,它叫做PushState 。
It's a newer technology which most of the newest browsers (internet explorer excluded :P) support. 这是一种新技术,大多数最新浏览器(Internet Explorer除外:P)支持。 Basicly it alters the adressbar through javascript.
基本上它通过javascript改变地址栏。
I might seem as nothing but it's really neat! 我可能看起来没什么,但它真的很整洁! Usually you'd do this through the hash
www.example.com#/contact
for example. 通常你可以通过哈希
www.example.com#/contact
来做到这一点。
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. 我使用过这项技术的最新项目我使用了名为History.js的js插件,可以确定您的浏览器是否支持PushState。
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. 根据这一点,我要么将事件绑定到相关链接,这些链接执行pushstate和ajax而不是加载新站点,或让
<a href="">
正常行动。
That makes all browsers rather happy. 这使得所有浏览器都很开心。
Basicly my script creates the same result with refresh as with pushstate and ajax. 基本上,我的脚本使用刷新和pushstate和ajax创建相同的结果。
EDIT: 编辑:
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. 它通过ajax加载新页面并获取它的HTML,但如果再次浏览该页面,它会重新显示获取的结果,因此不会进行不必要的ajax调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.