如何在没有实际页面刷新的情况下更新页面html和url

How to update page html and url without actual page refresh

本文关键字：情况下 更新 html url 刷新      更新时间：2023-09-26

我想知道是否有人能告诉我如何在不刷新页面的情况下更新页面html和url。

有没有现有的javascript库可以处理这一问题，或者有一本很好的书可以涵盖这类问题。

下面是一个使用这种效果的示例网站。

http://onedesigncompany.com/

请注意，当节和url发生更改时，实际的html是更新的，同时保持平滑过渡，没有可见的页面刷新。该网站在没有javascript的情况下也能正常工作。

此外，如果有人看到使用这种方法有任何不利之处，我会洗耳恭听。

如果您需要重新加载页面的一部分，而不重新加载整个页面，我强烈建议使用jQuery.Load():

http://api.jquery.com/load/

使用jQuery.load（），您可以选择一个div并从另一个网页将内容重新加载到其中。例如：

$(".myDiv").load("/myOtherwebpage.html");

您还可以指定其他页面上特定元素的内容：

$(".myDiv").load("/myOtherwebpage.html .myOtherClass");

但是，如果您需要从另一个页面重新加载所有内容，并将URL更改为其他页面，那么我建议您链接到该页面。通过jQuery这样做不会带来任何性能上的好处。

有，它被称为PushState。

这是一种更新的技术，大多数最新的浏览器（不包括internet explorer：p）都支持它。基本上，它通过javascript更改地址栏。

我可能看起来一无所有，但它真的很整洁！例如，通常您会通过散列www.example.com#/contact来执行此操作。

在我使用这项技术的最新项目中，我使用了一个名为History.js的js插件，whcih可以确定你的浏览器是否支持PushState。

根据这一点，我要么将事件绑定到相关链接，该链接执行pushstate和一些ajax，而不是加载新站点，要么让<a href="">正常工作
这让所有浏览器都相当高兴。

基本上，我的脚本通过刷新创建了与pushstate和ajax相同的结果。

编辑：
只是你这个例子的旁注。制作非常巧妙：）
它通过ajax加载新页面并获得HTML，但如果您再次浏览该页面，它会重新显示获取的结果，这样就不会进行不必要的ajax调用。

相关文章：