`
zhouyrt
  • 浏览: 1163878 次
  • 性别: 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后退解决方案 Ajax后退解决方案是指在使用Ajax技术时，如何正确地处理浏览器的后退按钮的点击事件，以便用户可以通过后退按钮返回到之前的状态。以下是三种常见的解决方案： 一、使用iframe，通过document....

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

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

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

    然而，这也会带来一个问题，即使用Ajax操作后，浏览器的历史记录无法正确处理后退和前进操作。本文将详细介绍如何利用JavaScript中的`history`对象API解决这个问题。 `history`对象提供了`pushState()`和`...

    AJAX技术Ajax.7z

    **四、AJAX的挑战与解决方案** 1. **浏览器兼容性**：不同浏览器对AJAX的支持程度不同，需要编写兼容代码或使用库如jQuery来解决。 2. **SEO问题**：由于搜索引擎爬虫无法执行JavaScript，使用AJAX加载的内容可能...

    AJAX使用场景分析

    对于那些需要从服务器获取数据以提供自动完成建议的场景，AJAX是一个理想的解决方案。它可以实现实时反馈，提高输入的准确性和效率。 ### AJAX不适用场景 尽管AJAX在许多场景下都能带来积极的影响，但也存在一些不...

    AJax实现PPT播放

    IBM作为全球知名的技术公司，其在Web开发领域的经验和资源无疑会为这个Ajax PPT播放解决方案提供坚实的基础。 结合标签"AJax*PPT*播放"，我们可以推测这个压缩包可能包含了一个使用Ajax实现PPT播放的示例代码、教程...

    Ajax Hacks

    **Ajax Hacks** 是一个关于使用Ajax技术进行创新和优化Web应用的集合，它提供了许多实用的技巧和解决方案。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下更新部分网页的技术，通过结合...

    ajax帮助文档.CHM

    **四、Ajax的挑战与解决方案** 1. **浏览器兼容性**：不同浏览器对Ajax的支持程度不同，需要使用jQuery、axios等库来统一处理。 2. **SEO问题**：搜索引擎爬虫可能无法执行JavaScript，导致部分内容无法被索引。...

    XHTML+ajax实战教程

    5. **兼容性问题**：考虑到老版本浏览器可能不支持Ajax或XMLHttpRequest，可以使用jQuery、axios等库来提供兼容性解决方案。 **学习资源推荐** "XHTML ajax 教程.chm"这个文件很可能包含了关于XHTML基础和Ajax实践...

    ajax的动态加载

    **Ajax 动态加载技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。...但同时也需要注意其带来的挑战，并适时采用相应的解决方案。

    ajax AjaxFastLane.pdf

    AjaxFastLane可能是某个关于Ajax技术的教程、书籍或资料的名称，其PDF形式可能包含了深入讲解Ajax原理、最佳实践、常见问题及解决方案等内容。学习这份资料，开发者可以进一步了解如何有效利用Ajax提升Web应用的性能...

    Ajax入门精解（FLASH，语音讲解）

    通过这个语音讲解的教程，你不仅能学习到Ajax的基本概念和技术，还能了解到它在实际开发中的应用场景和解决方案，从而提升你的前端开发技能。记得在学习过程中结合实际项目进行练习，以巩固所学知识。

    Ajax.Hacks探密书籍

    **Ajax.Hacks探密书籍**是一本专注于Ajax技术的深入解析和...- Stack Overflow：解决Ajax开发中遇到的问题和查找解决方案的社区。 通过深入学习和实践，开发者可以掌握Ajax技术，创建更具吸引力和效率的现代Web应用。

    Ajax 中文参考手册.chm

    3. **JSONP（JSON with Padding）**：跨域请求的一种解决方案，但存在安全风险。 总的来说，Ajax 是 Web 开发中不可或缺的一部分，它极大地提高了网页的交互性和用户体验。理解并熟练掌握 Ajax 技术，对于成为一名...

    ajax学习ppt（完整版）

    **Ajax的挑战与解决方案** - **浏览器兼容性**：不同浏览器对Ajax的支持程度不同，需要使用jQuery、axios等库来统一处理。 - **SEO问题**：搜索引擎爬虫无法执行JavaScript，可能无法抓取Ajax加载的内容。可使用...

    ajax教程 CHM

    现代Web开发中，有许多库和框架如Vue.js、React和Angular提供了集成的Ajax解决方案。它们通常提供更高级别的API，处理了大部分细节，使开发者能更专注于业务逻辑。 ### 10. 安全性考虑 在使用Ajax时，必须注意安全...

    AjaxPage实现分页

    **AjaxPage实现分页** 在Web开发中，用户界面的响应...在实际项目中，根据具体需求和技术栈，可以选择不同的实现方式，例如结合现代前端框架如React、Vue或Angular，这些框架都有成熟的解决方案来简化Ajax分页的实现。

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