html在浏览器不刷新,HTML5 修改浏览器url而不刷新页面

嘛，起因是黑子大叔在微博上的一条@信息，找起了这个的实现，看了一圈google的中文信息内似乎还没有怎么提到这个的内容，就发表上来。

详细效果就是类似于用Firefox4+/Chrome 5+/Safari 5+/Opera 11.5+登录新浪微博后看到的个人时间轴，在翻页时可以观察到这个效果，地址栏URL变动，但是页面没有刷新，用firebug观察也观察不到刷新整个页面，只有ajax请求的翻页数据。从先前的理解来说，URL的修改必然引起(请注意我不是在说通过锚点修改)浏览器重载页面，但利用HTML5新加入的history.pushState();和history.replaceState();可以完全自己维护一个历史记录列表绕开历史记录完全由浏览器控制的机制，从而实现比锚点更加完美的一种页内更新的体验。

代码方面很简单，只要在需要修改url的地方插入一行：

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle}, 'title', urlPath);

//三个参数，分别为：状态对象，标题(目前被浏览器忽略)，地址

即可在历史记录里面产生一个新的历史记录(另一个replaceState方法参数完全相同，只是替代掉当前的状态)。

在体验上，非常接近于使用锚点(window.location = “#foo”;)，但是mozilla的文档提出了以下三点好处：

新的URL可以是和原始页面URL同域下的任何URL，如果用锚点，只能更新#后面的部分

仅在需要时更新URL，锚点的历史记录在相同时不会创建(即当前已经是”#foo”的情况下，如果再将当前页面锚点设置为”#foo”，不会产生新的历史记录)

可以记录下任意类型的数据，使用锚点的话将要自己维护一份历史数据列表或者把数据转码到一个字符串里

(翻译&描述的有点别扭，见笑了，不过其实应该自己也能体会到这些好处才是)

代码：

if(!isset($_REQUEST['page'])){

$page = 1;

}

else{

$page = intval($_REQUEST['page']);

}

if(isset($_REQUEST['ajaxload'])){

echo "第{$page}页的内容";

die;

}

?>

HTML5 修改浏览器url而不刷新页面

var domLoaded = function(){

if(ua != null && ua[1] < 10){

alert('您的浏览器不支持');

return ;

}

if(location.href.indexOf("?") > -1){

var urlparts = location.href.match(/(.+?)\?.+/i);

var urlbase = urlparts[1];

}

else{

var urlbase = location.href;

}

var page = <?php echo $page;?>;

var ua = window.navigator.userAgent.match(/msie (\d\.\d)/i);

var content = document.getElementById("content");

var loading = document.getElementById("loading");

window.history.replaceState(

{

content:content.innerHTML,

page:page

},

page,

urlbase + (page > 1 ? '?page=' + page : '' )

);

var ajax = new XMLHttpRequest();

var ajaxCallback = function(){

if(ajax.readyState == 4){

loading.style.display = 'none';

content.innerHTML = ajax.responseText;

window.history.pushState(

{

content:content.innerHTML,

page:page

},

page,

urlbase + "?page=" + page

);

next.href = urlbase + "?page=" + (page + 1);

}

};

var next = document.getElementById('next');

var nextClickEvent = function(event){

if(loading.style.display != 'block'){

loading.style.display = 'block';

page++;

ajax.open('GET', urlbase + '?page=' + page + '&ajaxload=on', true);

ajax.onreadystatechange = ajaxCallback;

ajax.send('');

event.preventDefault();

}

};

next.addEventListener('click', nextClickEvent, false);

var popstate = function(){

content.innerHTML = history.state.content;

page = history.state.page;

};

window.addEventListener('popstate', popstate, false);

};

try{

window.addEventListener('DOMContentLoaded', domLoaded, false);

}

catch(e){

alert('您的浏览器不支持');

}

下一页

加载中

使用 JavaScript 修改浏览器 URL 地址栏

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

使用JavaScript修改浏览器URL地址栏的实现代码【转】

引用自http://www.jb51.net/article/42240.htm 现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起 ...

使用JavaScript 修改浏览器 URL 地址栏

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

使用JavaScript修改浏览器URL地址栏的实现代码

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不 ...

是不是content-type&colon; text&sol;html的数据包一到，浏览器就肯定刷新页面？

整理自:http://q.cnblogs.com/q/54726/ 是不是content-type: text/html的数据包一到,浏览器就肯定刷新页面? 或者说,浏览器收到的状态正常的conten ...

mui 从列表进入到详情，再返回，列表页还是进入列表之前的样子，而不刷新页面

mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面

利用javascript Location访问Url&comma;重定向&comma;刷新页面

网上转来了, 方便以后查询参考 本文介绍怎么使用javascript Location对象读和修改Url.怎么重载或刷新页面.javascript提供了许多方法访问,修改当前用户在浏览器中访问的url ...

HTML5 History对象，Javascript修改地址栏而不刷新页面

一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...

HTML5 History对象，Javascript修改地址栏而不刷新页面(二)

一.实例说明: $('#btnOne').click(function () { var stateObject = { id: 1 }; var title = "本地首页"; ...

随机推荐

node-sass报错解决方法

在Vue.js中,每一个vue文件都是一个组件,在.vue文件中可以将模板,脚本,样式写在一起,便于组织整个组件.在使用template,script时,编写css样式时,都进行的特别顺利,唯独当我想 ...

使用date类和format类对系统当前时间进行格式化显示

一:Date------------String 代码1:(代码二对显示出来的时间格式进行优化) package DateDemo; import java.text.SimpleDateFormat ...

图论--最近公共祖先问题(LCA)模板

最近公共祖先问题(LCA)是求一颗树上的某两点距离他们最近的公共祖先节点,由于树的特性,树上两点之间路径是唯一的,所以对于很多处理关于树的路径问题的时候为了得知树两点的间的路径,LCA是几乎最有效的解 ...

Orthomcl的详细使用

参考了众多文章并结合实际操作后的感想. 参考:http://www.plob.org/2013/09/18/6174.html 参考:http://www.plob.org/2012/06/12/22 ...

c&sol;c&plus;&plus; 数字转成字符串&comma; 字符串转成数字

c/c++ 数字转成字符串, 字符串转成数字 ------转帖 数字转字符串: 用C++的streanstream: #include #Include

Storm系列&lpar;三&rpar;Topology提交过程

提交示例代码: 1  ); // 设置一个ack线程 9      conf.setDebug(true); // 设置打印所有发送的消息及系统消息 10      StormSubmitter.su ...

使用NAT方式连网的linux服务器虚拟机搭建

从一开始我就很纠结centos服务器搭建的过程. 由于自己方向并不在运维上,但是学习开发也需要用到Linux所以就一直没认真去学. 经过自己多方面摸索与学习找到了自己的一套方法. 首先我用到的是 ce ...

centos安装如何选择安装包

1.根据经验,选择安装包时应该按最小化原则,即不需要的或者不确定是否需要的就不安装,这样可以最大程度上确保系统安全. 2.如果安装过程落了部分包组或者其他伙伴安装时没选,再安装后可以按如下方式补上安装 ...

ASP&period;NET Core MVC&plus;EF Core从开发到部署

笔记本电脑装了双系统(Windows 10和Ubuntu16.04)快半年了,平时有时间就喜欢切换到Ubuntu系统下耍耍Linux,熟悉熟悉Linux命令.Shell脚本以及Linux下的各种应用的 ...

lambda表达式底层处理机制

为了支持函数式编程,Java 8引入了Lambda表达式,那么在Java 8中到底是如何实现Lambda表达式的呢? Lambda表达式经过编译之后,到底会生成什么东西呢? 在没有深入分析前,让我们先 ...