ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。
与传统的AJAX的区别
传统的ajax有如下的问题:
虽然ajax可以无刷新改变页面内容,但无法改变页面URL
其次为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变
再有,ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的
为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState,history.replaceState
可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。
如何调用
var state = {
title: title,url: options.url,otherkey: othervalue
};
window.history.pushState(state,document.title,url);
state对象除了要title和url之外,也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。
replaceState和pushState是相似的,不需要多做解释。
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。
window.addEventListener('popstate',function(e){
if (history.state){
var state = e.state;
//do something(state.url,state.title);
}
},false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
一些限制
1、无法跨域,这个是必然的。引用曾经在网上看到的一句经典的话:“如果javascript可以跨域的话,那他就可以逆天了!”
2、state对象虽然可以存储很多自定义的属性,但值不能是个对象。
对应后端的一些处理
这种模式下除了当前使用ajax可以无刷新浏览外,还要保证直接请求改变的URL后也可以正常浏览,所以后端要对这些处理下。
1、对结合pushState的ajax可以发送一个特殊的头,如:setRequestHeader(‘PJAX’,‘true’)。
2、后端获取到有PJAX=true的header时,将页面中通用的部分都不输出。比如:PHP可以通过下面的判断
function is_pjax(){
return array_key_exists('HTTP_X_PJAX',$_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}
虽然接口上只有pushState、replaceState、onpopstate,但在使用的时候还是要做很多处理的。
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...相关推荐
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
- 使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的 ...
- 无刷新修改页面的浏览器地址栏显示地址的方法
作为一个Web程序员,我经常会到网上去看别人是如何做网站,如何开发Web应用的.这样的好处有很多,一是开阔你的眼界,你能看到很多书本上没有的东西,二是看别人的代码是如何写的,取人之长.补己之短.像纯C ...
- HTML5无刷新修改URL:利用 History API 无刷新更改地址栏
为什么80%的码农都做不了架构师?>>> HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转. 简单来说:假设当前页面为ren ...
- window.history.pushState()和window.history.replaceState()
今天在项目中遇到 要实现修改地址栏但是页面不可以刷新的需求 查阅资料发现可以用window.history.pushState(state, title, url)和window.history.re ...
- php无刷新实现页面更新,使用laravel和ajax实现整个页面无刷新的操作方法
1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ' ...
- ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用
我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...
- 操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState()
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.历史记录前进与后退 1.后退: window.history.back() -- 相当于用户在浏 ...
- window history pushState replaceState 跳转原理
一.pushState 比如,当前打开的界面是:https://developer.mozilla.org/en-US/docs/Web/API/History,如下图所示: 在chrome的cons ...
最新文章
- 物联网安全:LED灯中存在多个安全漏洞
- Css的filter常用滤波器属性及语句大全
- hadoop 基础环境搭建(一)
- 【Fibonacci-PEG,LDPC】基于Fibonacci-PEG算法的LDPC码校验矩阵的构造
- C++ Data语意学
- fast_recovery_area无剩余空间(ORA-19815)
- 零拷贝(Zero Copy)
- Spring开发环境搭建和第一个示例程序
- oracle报表范例1 (转载)
- 类String的比较
- ajax清除session,跳出iframe框架页面后跳转页面
- 佳能g2810提示5b00_canon佳能G1810 G2810 G3810 打印机5b00清零软件操作教程
- 深度卷积神经网络(一)
- 华为谷歌安装器 Android6.0,gms安装器华为
- JITSI开源视频直播
- 曾国藩家训:三个地方看一个家庭的兴败
- python爬取微信公众号文章
- [翁恺老师 城堡游戏(无bug
- 贪婪算法-Greedy algorithm
- LeetCode—494. 目标和(Target Sum)——分析及代码(Java)
热门文章
- SpringSocial业务系统与社交网站的绑定与解绑
- Python Lambda 的简单用法
- [BZOJ]1055: [HAOI2008]玩具取名
- ASP.NET MVC RedirectToRoute类[转]
- git 常用指令 -
- BZOJ 1013 球形空间产生器
- (原创)如何解决matlab乱码问题
- 异常:Invalid character found in the request target. The valid characters are defined in RFC 3986
- 想成为NLP算法工程师,你必须要看一下这10篇论文!
- 《2020信息消费战“疫”案例集》发布 邬贺铨院士作序推荐(附下载连接)