- 浏览: 3292280 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 4356作者:zccst 如果一个URL是:http://www.e ... -
理解JavaScript的单线程运行机制及setTimeout(fn,0)
2015-03-30 17:56 5540zccst整理 阮老师的链接 ... -
延迟自定义函数
2015-03-26 14:02 1019作者:zccst 如果函数内又定义了一个跟自己同名的函数,执 ... -
js语句和表达式
2015-03-11 11:21 677作者:zccst 一直觉得语句和表达式很简单,不需要专门留意 ... -
再次学习try catch finally
2015-03-10 11:26 1726作者:zccst 一、基本介绍 JavaScript的错误 ... -
[201502]封装
2015-02-07 11:59 761作者:zccst 我理解的封装是建立在熟悉面向对象和继承的基 ... -
js运算符优先级
2015-01-26 10:39 2559作者:zccst js运算符优先级也是一个巨大的坑。有时候你 ... -
《JavaScript模式》读书笔记
2015-01-23 11:59 844作者:zccst 第四章:函 ... -
js判断复合数据类型的两种方式(typeof不奏效了)
2014-11-07 17:47 2464作者:zccst typeof认为所有的复合数据类型都是&q ... -
js-闭包(权威指南版)
2014-10-27 18:42 1355作者:zccst //1,闭包是 ... -
js数据类型转换
2014-10-22 10:53 6620作者:zccst 2015-3-27 类 ... -
Javascript语言精粹-毒瘤和糟粕
2014-09-16 18:37 1172作者:zccst Javascript是一门语言,用久了肯定能 ... -
[夏天Object]运行时程序执行的上下文堆栈(一)
2014-07-01 22:26 1532作者:zccst 时间:2014-07-01 这已经是第二 ... -
[Object]继承(经典版)(五)封装
2014-06-18 22:21 1049作者:zccst 封装已经上升到写插件的水平了,与多重继承属 ... -
[Object]继承(经典版)(四)多重继承和组合继承
2014-06-18 22:16 1537作者:zccst 一、多重继承 不得不说,这又是异常精彩的 ... -
[Object]继承(经典版)(三)继承理论总结
2014-06-18 22:15 1226作者:zccst 更新:在JavaScript模式中,作者 ... -
[Object]继承(经典版)(二)原型链(原型继承)
2014-06-18 22:05 1025作者:zccst 毫不夸张的说,这节是继承的核心所在。是重中 ... -
[Object]继承(经典版)(一)对象冒充和Call
2014-06-18 21:51 2499作者:zccst 先臆想一下这种方法 var a = ... -
[Object]面向对象编程(高程版)(0)属性和方法
2014-06-16 23:04 926zccst转载+原创 function Person() ... -
[Object]面向对象编程(高程版)(0)原型方法能调用实例方法?
2014-06-09 16:41 1223作者:zccst 按照我的理解,实例方法在对象中,原型方法在 ...
相关推荐
NULL 博文链接:https://smiky.iteye.com/blog/1917700
尽管也存在一些,但由于您只能使用本机HTML5 History API,因此它们相对较小。 如果您打算支持旧版浏览器,那么可以使用History.js。 该通知位于此处,因为History.js没有获得足够的资金来维护,因此它仅在旧版...
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: [removed] = function(event){ console.log...
通过指定更改规则并为其分配回调,可以轻松地在各种浏览器中处理hashchange事件的库。 内置了对基于Ajax的规则的自动AJAX调用的支持。 支持IE7 +,Chrome 6 +,Safari,Opera 10.6+和FF3.6 +。 没有依赖关系。
-JavaScript中的路由设置包括库和jquery.routes.js文件。< script type =" text/javascript " src =" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js " > </ script >< script type =...
前端项目-jquery-hashchange,这个jquery插件通过一个跨浏览器窗口.onhashchange事件启用了非常基本的书签哈希历史。
不支持HTML5 pushState; 许多常用的浏览器不支持它。重要的请注意,这是当前的Beta。 它应该可以运行,但是我还有很多要改进的地方,例如更多的匹配器,改进的语法和完整的单元测试范围。特征向后兼容不支持“ ...
Vue+Element 实现管理页面菜单栏, 点击菜单时 router 改变 hash 访问不同子组件。 但是改变 hash 时菜单栏展开状态和 highlight 并不会同步, 需要手动实现。 Try Try See 第一反应是通过 onhashchange 监听 hash ...
在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化。 但是,他们的行为有些差异。在IE8 以前的 IE版本里面,当 [removed] 对象迅速变化的情况下,onhashchange 不会触发,非常奇怪...
再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 2、 随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题 通过一个路径定义一个页面部分,在单页面...
大力水手 锚导航动画 默认使用 var popeye = new Popeye ( 'nav a' ) ; 白色元素 var popeye = new Popeye ( { 'navigate' : 'nav.popeye-within-relative a' , 'within' : 'div.popeye-...监听 onhashchange 事件