- 浏览: 3315562 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
现在的开发,越来越倾向于页面内跳转,这种情况下需要更新自己的知识,来实现页面内跳转。history就是解决这个问题的。
HTML5有两种解决办法:
1,onhashchange
用到了window.loaction.hash对象(存,取)
2,history
(1) pushstate 三个参数:数据,标题(为空),url(可选)。
(2) popstate是一个事件,读取event.state数据
注意:url是虚假的。用户不能实际找到。
本质上:两种方式都是存值+取值事件。简化后就是:
window.loaction.hash = srcArr;
window.onhashchange=function(){
var val = window.loaction.hash;
}
和
history.pushState = srcArr;
window.onpopstate=function(event){
var val = event.state;
};
详情参考如下参数随机数例子:
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
现在的开发,越来越倾向于页面内跳转,这种情况下需要更新自己的知识,来实现页面内跳转。history就是解决这个问题的。
HTML5有两种解决办法:
1,onhashchange
用到了window.loaction.hash对象(存,取)
2,history
(1) pushstate 三个参数:数据,标题(为空),url(可选)。
(2) popstate是一个事件,读取event.state数据
注意:url是虚假的。用户不能实际找到。
本质上:两种方式都是存值+取值事件。简化后就是:
window.loaction.hash = srcArr;
window.onhashchange=function(){
var val = window.loaction.hash;
}
和
history.pushState = srcArr;
window.onpopstate=function(event){
var val = event.state;
};
详情参考如下参数随机数例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function (){ var oInput = document.getElementById("input1"); oInput.onclick=function(){ var oDiv = document.getElementById("div1"); var num = generateNum (6); //onhashchange window.location.hash = num; window.onhashchange = function(){ oDiv.innerHTML = window.location.hash.substring(1); } //history /* history.pushState(num, ''); window.onpopstate = function(event){ oDiv.innerHTML=event.state; }*/ oDiv.innerHTML=num; //生成随机数 function generateNum (num){ var ret = []; for (var i = 0; i < num; i++) { ret.push(Math.ceil(100*Math.random())); }; return ret; } } } </script> </head> <body> 中奖号码: <div id="div1"></div> <input type="button" value="生成随机号码" id="input1" /> </body> </html>
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
[正则]改变URL中的参数值
2015-05-20 20:37 4414作者:zccst 如果一个URL是:http://www.e ... -
理解JavaScript的单线程运行机制及setTimeout(fn,0)
2015-03-30 17:56 5594zccst整理 阮老师的链接 ... -
延迟自定义函数
2015-03-26 14:02 1055作者:zccst 如果函数内又定义了一个跟自己同名的函数,执 ... -
js语句和表达式
2015-03-11 11:21 708作者:zccst 一直觉得语句和表达式很简单,不需要专门留意 ... -
再次学习try catch finally
2015-03-10 11:26 1788作者:zccst 一、基本介绍 JavaScript的错误 ... -
[201502]封装
2015-02-07 11:59 805作者:zccst 我理解的封装是建立在熟悉面向对象和继承的基 ... -
js运算符优先级
2015-01-26 10:39 2619作者:zccst js运算符优先级也是一个巨大的坑。有时候你 ... -
《JavaScript模式》读书笔记
2015-01-23 11:59 889作者:zccst 第四章:函 ... -
js判断复合数据类型的两种方式(typeof不奏效了)
2014-11-07 17:47 2513作者:zccst typeof认为所有的复合数据类型都是&q ... -
js-闭包(权威指南版)
2014-10-27 18:42 1390作者:zccst //1,闭包是 ... -
js数据类型转换
2014-10-22 10:53 6667作者:zccst 2015-3-27 类 ... -
Javascript语言精粹-毒瘤和糟粕
2014-09-16 18:37 1206作者:zccst Javascript是一门语言,用久了肯定能 ... -
[夏天Object]运行时程序执行的上下文堆栈(一)
2014-07-01 22:26 1569作者:zccst 时间:2014-07-01 这已经是第二 ... -
[Object]继承(经典版)(五)封装
2014-06-18 22:21 1133作者:zccst 封装已经上升到写插件的水平了,与多重继承属 ... -
[Object]继承(经典版)(四)多重继承和组合继承
2014-06-18 22:16 1580作者:zccst 一、多重继承 不得不说,这又是异常精彩的 ... -
[Object]继承(经典版)(三)继承理论总结
2014-06-18 22:15 1264作者:zccst 更新:在JavaScript模式中,作者 ... -
[Object]继承(经典版)(二)原型链(原型继承)
2014-06-18 22:05 1079作者:zccst 毫不夸张的说,这节是继承的核心所在。是重中 ... -
[Object]继承(经典版)(一)对象冒充和Call
2014-06-18 21:51 2547作者:zccst 先臆想一下这种方法 var a = ... -
[Object]面向对象编程(高程版)(0)属性和方法
2014-06-16 23:04 960zccst转载+原创 function Person() ... -
[Object]面向对象编程(高程版)(0)原型方法能调用实例方法?
2014-06-09 16:41 1277作者:zccst 按照我的理解,实例方法在对象中,原型方法在 ...
相关推荐
在IT行业中,`iframe` 和 `onhashchange` 是两个重要的前端开发概念,它们与页面的历史记录管理和单页面应用(SPA)的实现密切相关。本文将深入探讨这两个话题,并结合提供的标签"源码"和"工具",分析如何利用它们来...
HTML5的history API包含两个主要方法:pushState和replaceState。这两个方法允许我们对浏览器历史记录进行管理,能够控制浏览器历史记录栈中的记录。 ```javascript history.pushState({color:'red'}, 'red', 'red'...
总结起来,HTML5的`pushState`和`popstate`提供了无刷新改变URL的能力,结合`history`对象的其他方法,开发者可以创建出更加丰富的用户体验,如单页应用(SPA)中的导航和历史管理。理解并熟练运用这些API,能有效提升...
5. HTML5 History API: 通过改变浏览器的历史记录,可以在URL不变的情况下传递数据。例如,使用`history.pushState()`或`history.replaceState()`方法,将数据以状态对象的形式添加到历史记录中,然后在其他页面中...
HTML5引入了一个新的API——History API,它允许JavaScript改变浏览器的历史记录栈,而不必重新加载整个页面。这个API提供了以下三个方法: - **`pushState()`**:向历史记录栈添加一个新的条目。 - **`...
HTML5 引入的 History API 提供了 `pushState` 和 `replaceState` 方法,使得开发者可以在不重新加载页面的情况下更改浏览器的历史记录。Vue Router 的 history 模式利用了这些方法,允许创建更干净的 URL,去除 `#`...
- 特点:依赖HTML5的History API,可以创建更美观、更规范的URL。 - 触发机制:使用`history.pushState`和`window.onpopstate`事件来实现URL的变化和监听。 - 刷新行为:刷新页面会导致服务器端接收到请求并返回...
另一方面,history模式提供了更优雅的URL,如`http://example.com/home`,它基于HTML5的`History`接口,利用`pushState`和`popstate`事件来管理浏览历史记录。在这种模式下,虽然URL看起来像是服务器端的路由,但...
- **原理**:history 模式利用了 HTML5 的 `pushState` 和 `replaceState` 方法来修改浏览器的历史记录,这样就可以改变 URL 而不发送新的请求。但是,由于服务器实际上没有对应的资源,因此需要配置服务器来将所有...
在实际项目中,还可以考虑使用jQuery的插件,如`History.js`或`jQuery BBQ`,它们提供了更完善的`hash`管理和历史记录支持,简化了开发过程。在提供的`cyzshenzhen-jquery_history_demo-master`压缩包中,可能包含了...
- **History 模式**:依赖于 HTML5 的 History API,如 `pushState` 和 `replaceState`,可以创建和修改浏览历史记录,使 URL 更加友好,例如 `http://example.com/home`。不过,启用此模式需要服务器配置,以便在...
HTML5 的 History API 提供了 `history.pushState()` 和 `history.replaceState()` 方法,它们允许我们在不刷新页面的情况下修改浏览器的历史记录。这两个方法都有三个参数:状态对象、标题(目前大多数浏览器忽略此...
- HTML5规范定义了history对象的pushState和replaceState方法,允许我们在不刷新页面的情况下修改浏览器的历史记录。这对于实现更平滑的页面跳转和状态管理非常有用。 - 除了pushState和replaceState方法,HTML5还...
首先,HTML5通过History API提供了history对象,该对象允许我们操作浏览器的历史记录,即使在AJAX应用中也可以实现前进和后退的功能。History对象的属性和方法主要包括: 1. `length`属性:它返回浏览器历史记录中...
HTML5的`History`接口允许我们在不实际加载新页面的情况下改变浏览器的历史记录。通过`pushState`和`replaceState`方法,我们可以改变URL并更新历史记录,而`popstate`事件则用来监听这些改变。然而,这种方法需要...
2. **通过History API改变路由**:HTML5引入了History API,允许开发者在不刷新页面的情况下修改URL。主要有以下方法: - `history.back()`:返回浏览器会话历史中的上一页。 - `history.forward()`:前往浏览器...
HTML5的出现,引入了history.pushState和history.replaceState两个API,这两个API允许我们操作浏览器的历史记录,从而解决传统AJAX在回退刷新页面时出现的问题。通过使用这两个API,开发者可以在不刷新页面的情况下...
这种方法的核心在于利用了HTML5 History API中的`pushState`方法和`replaceState`方法,以及改变URL的hash部分(即URL中的#后内容)来记录历史状态。 在Web页面中,URL的hash值改变时,页面不会跳转到新地址,但...