大佬教程收集整理的这篇文章主要介绍了HTML5无刷新修改URL：利用 History API 无刷新更改地址栏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接，配合 AJAX 可以做到无刷新跳转。
简单来说：假设当前页面为
之后，地址栏的地址就会变成 上面的语句实际上用到了 HTML5 的历史记录 API。这套 API 提供一种「人为操纵」浏览器历史记录的方法。 浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。 执行
例如，我们可以这样写：
@H_301_22@popstate 事件
当用户点击浏览器的「前进」、「后退」按钮时，就会触发
这里
有时，你希望不添加一个新记录，而是替换当前的记录（比如对网站的 landing page），则可以使用
@H_301_22@应用：全站 AJAX，并使浏览器能够抓取 AJAX 页面
这个可以干啥用？一个比较常用的场景就是，配合 AJAX。 假设一个页面左侧是若干导航链接，右侧是内容，同时导航时只有右侧的内容需要更新，那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样，地址栏是不会改变的，用户无法前进、后退，也无法收藏当前页面或者把当前页面分享给他人；搜索引擎抓取也有困难。这时，就可以使用 HTML5 的 History API 来解决这个问题。 思路：首先绑定
为了处理用户前进、后退，我们监听
最后，整个过程是不会改变页面标题的，可以通过直接对
@H_301_22@其他说明
为了安全考虑，新 URL 必须和当前 URL 在同一个域名下。例如，你不能把地址改成 Google 的首页。否则不怀好心的人就可以把地址改成网银等关键网站的地址，来迷惑用户了。 但是，URL 允许使用 query string 的形式。例如：
在某些情况下可能比较方便。 根据 MDN 提供的信息，IE 10,Chrome 5,Firefox 4,Safari 5 开始支持这个特性。Fallback 可以采用替换 hash 的方法。另外，History.js 库也提供了对老版本浏览器的 history API 支持（同样是利用替换 hash）。为了搜索引擎收录，可能需要使用
renfei.org/@H_502_10@，那么执行下面的 JavaScript 语句：window.history.pushState(null, null, "/profile/");
renfei.org/profile/@H_502_10@，但同时浏览器不会刷新页面，甚至不会检测目标页面是否存在。pushState@H_502_10@函数之后，会往浏览器的历史记录中添加一条新记录，同时改变地址栏的地址内容。它可以接收三个参数，按顺序分别为：var state = {
id: 2, name: "profile"
};
window.history.pushState(state, "My Profile", "/profile/");
popstate@H_502_10@事件。你可以监听这一事件，从而作出反应。window.addEventListener("popstate", function(e) {
var state = e.state; // do something...
});
e.state@H_502_10@就是当初pushState@H_502_10@时传入的第一个参数。例如，在我们的例子中，有：e.state.id == 2;
e.state.name == "profile";
replaceState@H_502_10@方法。这个方法和pushState@H_502_10@的参数完全一样。click@H_502_10@事件。当用户点击一个链接时，通过preventDefault@H_502_10@函数防止默认的行为（页面跳转），同时读取链接的地址（如果有 jQuery，可以写成$(this).attr('href')@H_502_10@），把这个地址通过pushState@H_502_10@塞入浏览器历史记录中，再利用 AJAX 技术拉取（如果有 jQuery，可以使用$.get@H_502_10@方法）这个地址中真正的内容，同时替换当前网页的内容。popstate@H_502_10@事件。当用户点击前进或后退按钮时，浏览器地址自动被转换成相应的地址，同时popstate@H_502_10@事件发生。在事件处理函数中，我们根据当前的地址抓取相应的内容，然后利用 AJAX 拉取这个地址的真正内容，呈现，即可。document.title@H_502_10@赋值来更改页面标题。URL 的限制
window.history.pushState(null, "?id=1");
浏览器兼容性
#!@H_502_10@表示法。
以上是大佬教程为你收集整理的HTML5无刷新修改URL：利用 History API 无刷新更改地址栏全部内容，希望文章能够帮你解决HTML5无刷新修改URL：利用 History API 无刷新更改地址栏所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。