使用history.pushState()和popstate事件实现AJAX的前进、后退功能
上一篇文章中。我们使用location.hash来模拟ajax的前进后退功能。使用location.hash存在以下几个问题:
1.使用location.hash会导致地址栏的url发生变化。用户体验不够友好。
2.location.hash产生的历史记录无法改动。每次hash改变都会导致产生一个新的历史记录。
3.location.hash仅仅是1个字符串,不能存储非常多状态相关的信息。
为了解决这些问题,HTML5中引入了history.pushState()、history.replaceState()、popstate事件来处理浏览器历史记录的问题。
以下的代码能够达到跟location.hash同样的效果,能够看到地址栏url不会改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript"> var currentPageIndex = 0; window.onload = function(){
currentPageIndex = 0;
showPageAtIndex(currentPageIndex);
addHistory(currentPageIndex);
} // onpopstate能够监控state变化
window.onpopstate = function(e){
if(history.state)
{
var state = history.state;
showPageAtIndex(state.id);
}
} function toNextPageWhenClick()
{
currentPageIndex++; if(isValidPageIndex(currentPageIndex))
{
showPageAtIndex(currentPageIndex);
addHistory(currentPageIndex);
}
else
{
return;
}
} function showPageAtIndex(id)
{
$("div[id!="+id+"]").hide();
$("#"+id).show(); if(isHomePage(id))
{
$("input").attr("value","current is home page,next page=1");
}
else if(isLastPage(id))
{
$("input").attr("value","current page="+id+", it is the end.");
}
else
{
$("input").attr("value","current page="+id+",next page="+(id+1));
}
} function isValidPageIndex(id)
{
return id <= 5;
} function isLastPage(id)
{
return id == 5;
} function isHomePage(id)
{
return id == 0;
} // 添加历史记录
function addHistory(id)
{
history.pushState({"id":id},"","");
}
</script> <style>
.navigate{
height:100px;
width:300px;
background-color:#0000ff;
display:none;
} .home{
height:100px;
width:300px;
background-color:#00ff00;
display:none;
} .last{
height:100px;
width:300px;
background-color:#ff0000;
display:none;
}
</style>
</head>
<body>
<input type="button" value="" onclick="toNextPageWhenClick();"> <div class="home" id="0">HOME PAGE</div>
<div class="navigate" id="1">ajax1</div>
<div class="navigate" id="2">ajax2</div>
<div class="navigate" id="3">ajax3</div>
<div class="navigate" id="4">ajax4</div>
<div class="last" id="5">last page</div>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWl0YW5neW9uZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWl0YW5neW9uZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
使用history.pushState()和popstate事件实现AJAX的前进、后退功能的更多相关文章
- pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新
最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退. 首先说说pushState(),这个函数将当前的url等信息加入history堆栈中: ...
- 监听浏览器返回,pushState,popstate 事件,window.history对象
在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...
- 关于histry的pushstate 和 popstate事件的应用
这篇文章是基础:http://www.cnblogs.com/kaituorensheng/p/3776527.html: histry的单页面应用有两个写法:哈希值和?: 哈希值例子: 实现效果:点 ...
- Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
- ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- Javascript history pushState onpopstate方法做AJAX SEO
参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- [libgdx游戏开发教程]使用Libgdx进行游戏开发(7)-屏幕布局的最佳实践
管理多个屏幕 我们的菜单屏有2个按钮,一个play一个option.option里就是一些开关的设置,比如音乐音效等.这些设置将会保存到Preferences中. 多屏幕切换是游戏的基本机制,Libg ...
- 【转】学一点Git--20分钟git快速上手
看到一篇不错的Git的简单入门教程,转过来给自己留个底. 原文地址:http://www.cnblogs.com/shuidao/p/3535299.html 在Git如日中天的今天,不懂git都不好 ...
- 16、Flask实战第16天:Flask文件上传
上传文件 这里以图片来演示flask如何上传文件 首先来写个简单的前端页面upload.html, 在里面写个文件上传的表单 后端debug断点调试 获取到文件后,当然,我们需要把文件保存下来.在项目 ...
- [CTSC2017]密钥
传送门:http://uoj.ac/problem/297 “无论哪场比赛,都要相信题目是水的” 这不仅是HNOI2018D2T3的教训,也是这题的教训,思维定势真的很可怕. 普及组水题,真是愧对CT ...
- [LOJ6436]神仙的游戏
感觉border的性质还是挺神奇的 一个border的性质是$S$有长度为$len$的border当且仅当对$\forall i\equiv j\left(\bmod(n-len)\right)$有$ ...
- 【枚举】bzoj1643 [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪
显然<=n的平方数只有sqrt(n)个,三重循环枚举三块草坪,再减一下验证最后一块是不是平方数.O(n*sqrt(n)). #include<cstdio> #include< ...
- [CodeChef-LVGFT]Lovers Gift
题目大意: 给定一个$n(n\le10^5)$个结点的树,初始全为白点.$m(m\le10^5)$次操作,每次将点$x$染成黑色或询问从$x$出发至少经过一个黑点能到达的点中,编号次大的点. 思路: ...
- Java高级架构师(一)第07节:远程使用以及冲突解决
- sql字段字符用做其他类型查询
select * FROM aa where parent = %@ ORDER BY cast(seq as integer) ASC
- Step by Step 使用HTML5开发一个星际大战游戏(1)
本系列博文翻译自以下文章 http://blog.sklambert.com/html5-canvas-game-panning-a-background/ Languages: HTML5, Jav ...