`
zhouyrt
  • 浏览: 1126158 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ajax后退解决方案（五）

 
阅读更多

五、使用history.pushState产生历史，popstate事件处理后退

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>0</title>
</head>
<body>
	<input type="button" value="加1" onclick="add()" />
	<div id="info" style="border:red 1px solid;width:200px;padding:10px;">0</div>
</body>
</html>
<script src="history-0.5.js"></script>
<script>
	var info = document.getElementById('info');
	var i = 1;
	function add() {
		var data = {
		    param : i,
		    func : func
		};
		info.innerHTML = i;
		document.title = i;
		History.push(data);
		i++;
	}
	
	function func(i) {
	    info.innerHTML = i;
	    document.title = i;
	}
</script>

 

pushState和popstate是HTML5为history对象新增的方法和事件。虽然可以改变地址栏，但却不能复制地址栏的url直接进入该历史记录。该系列API知道IE10预览版尚不支持，Firefox/Safari/Chrome/Opera的最新版本均支持。

开发中应根据需求组合以上形式以兼容所有浏览器，如新浪微博就组合使用了方案一，四，五(base.js)。如果项目中使用了一些开源库如jQuery，mootools等时强烈推荐使用histroy.js 。古老的dhtmlHistory.js和RSH已经很久没更新了。

 

history-0.5.js


相关：

http://www.w3.org/TR/html5/history.html

http://dev.opera.com/articles/view/introducing-the-html5-history-api/

1
顶
2
踩
分享到：
| ajax后退解决方案（四）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax后退解决方案

    ajax后退解决方案，需要的朋友可以参考下。

    当用户退出点击浏览器后退仍可回到原来页面的解决方案

    解决方案1：禁用缓存，前一次使用的方法，在电脑上各浏览器都没问题，但在ipad、安卓手机上仍有问题 解决方案2：禁用浏览器后退键 [removed] ...解决方案4：用ajax，在ajax页面里将session清空，然后在现在的页面加

    ajax无刷新页面切换,历史记录后退前进解决方案.docx

    ajax无刷新页面切换,历史记录后退前进解决方案.docx

    结合AJAX的PHP开发之后退、前进和刷新

    我们介绍了如何创建一个自定义的历史堆栈来跟踪 Ajax 应用程序中的事件。可以在应用程序中添加 Web ...这样做有助于建立不会严格绑定到某个应用程序的解决方案，该解决方案可用于其他 Ajax 应用程序来解决同样的问题。

    基于Jquery.history解决ajax的前进后退问题

    网上已经有了js的开源解决方案pushState。详见pjax 但是这个方案不适合我的项目（后台项目），尤其是主要的方法有点不够用。 我使用的是 jquery.history.js 可以参考这个 history.js 看下面的代码 &lt;!DOCTYPE ...

    回退按钮解决方案

    结合了ajax的浏览器后退事件控制原理。

    Vue 实现前进刷新后退不刷新的效果

    解决方案在 app.vue 设置: 假设列表页为 list.vue ,详情页为 detail.vue ,这两个都是子组件。 我们在 keep-alive 添加列表页的名字，缓存列表页。 然后在列表页的 created 函数里添加ajax请求，这样只有第一次...

    KODExplorer 芒果云-资源管理器

    - backspace后退截获浏览器事件,作为后退前一次访问的文件夹; - 搜索首字母不匹配问题 - 弹出层中的弹出层关闭，父窗口失去焦点问题。 - 代码中grunt部分代码拆分开，放到程序外面；提交到git、osc - 桌面：...

    asp.net知识库

    一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上，会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与...

Magicbox
Global site tag (gtag.js) - Google Analytics