hashchange

理解浏览器历史记录（2）-hashchange、pushState

本文也是一篇基础文章.继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变化对浏览器的历史记录也会影响,同时锚点的变化跟pushState也有一些关联.所以就花了点时间,把这两个东西尽量都琢磨清楚.本文记录相关的一些要点及研究过程. 1. hashchange 这个部分的内容也已经补充到上文的最后了,这里只是细化一下.总的结论是:如果一个网页只是锚点,也就是location.hash发生变化,也会导致历史记录栈的变化:且变化相关的所有特性,都与上文描述的整个页面变化的特性相同…

hashchange事件的认识

写过路由的同学都知道其原理是通过URL的改变,由导航信息来决定页面信息...表述的好像有点不准确这么说吧,只要URL参数列表只要变化就会调用hashchange事件,此时event对象包括oldURL和newURL两个属性,分别保存参数列表变化前后的完整URL. 目前支持hashchange事件的浏览器有IE8+.Firfox3.6.Safari5+.Chrome和Opera10.6+,其中只有Firfox6+.Chrome和Opera支持oldURL和newURL属性, 因此,最好使用loc…

jQuery不支持hashchange事件？

$(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashchange的相关内容,所以靠事件模拟里进行hashchange. jq源码里找不到hashchange的相关内容,难道就说明jQuery不支持hashchange事件?也不一定,说不定jq通过别的方法将原生事件前面的on去掉了呢.谁知道呢,只有通过研究jq源码了.…

AJAX保留浏览历史的解决方案——hashchange()

在ajax请求中,不能更新地址栏,地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验. 解决方案如下: 方案一:使用window. Onhashchange 事件如下面Html片段,点击不同的连接,在mainPanel中加载不同的页面: page1 page2 page3 首先写一个方法来获取当前url中指定key的hash值,如下: 使用onhashchange事件触发ajax请求: 到这里工作已经完成了80%,为什么是80%呢,这里面还有一个问题: 当你直接在浏览器(新…

WebApp 中用 hashchange 做路由解析

<!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-…

<!DOCTYPE html> <html> <head> <title>Hash Change Example</title> <script type="text/javascript" src="EventUtil.js"></script> </head> <body> <p>Click each of these links to cha…

简单的基于hash和hashchange的前端路由

hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name="demo"></a>,二是使用id属性,比如 <span id="demo" ></span> 带hash的请求当打开http://www.example.com/#print服务器实际收到的请求地址是http://www.exam…

基于hashchange导航管理

想在五一放假的时候写出来,由于放假有点兴奋,心早就跑了,不废话了. 说一下基于hashchange导航管理: 浏览器的历史记录导航是用户非常常用的功能,除了点击前进后退按钮外,Window上的history对象还可以实现浏览器的导航. 例如:window.history.back();//后退 window.forward();//前进 window.history.go(-1);//后退一步 window.history.go(1)//前进一步这些方法都会有一个共同的特点是都会导致浏览器重新…

hashChange & url change & QRCode & canvas to image

hashChange & url change & QRCode & canvas to image "use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * * @description iframe for eapp tesing * @augments * @example * */ const iframeForEapp = (debug = false) =&…

js中hash、hashchange事件

1.hash即URL中"#"字符后面的部分. ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置: ②hash还有另一个特点,它的改变不会导致页面重新加载: ③hash值浏览器是不会随请求发送到服务器端的: ④通过window.location.hash属性获取和设置hash值. window.location.hash值的变化会直接反应到浏览器地址栏(#后面的部分会发生变化),同时,浏览器地址栏hash值的变化也会触发w…

锚接口(上)——hashchange api 和 $.uriAnchor

概述这是我在单页Web应用这本书上看到的方法,并深入的研究了一下,把结果记录在下面,供以后开发时参考,相信对其它人也有用. 说明一下,这个方法已经过时了,H5有更新的方法:history api,我们在锚接口(下)会讲到. 引子自从接触单页面spa之后,我就对它的路由非常好奇:既然不是传统的利用文件夹存放路径的形式来路由的话,那到底单页面spa是怎么路由的呢? 更关键的是,复制url并在另一个页面打开,内容为什么不会变呢? 说明 url的hash值改变的时候,页面并不会刷新,这是唯一改变ur…

hash、hashchange事件

hashchange事件

h5新增了hashchange事件,以便在URL参数列表(及URL中‘#’号后面的所有字符串),发生变化时通知开发人员. 之所以要添加这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数列表来保存状态或导航信息. 必须把hashchange事件处理程序添加给window对象,然后URL列表只要发生变化就会调用他,此时的event对象应该额外包含两个属性:oldURL和newURL. 这两个属性分别保存着参数列表变化前后的完整的URL. <!DOCTYPE html> <html…

【html5】hashchange Event – 监测URL的hash变化

通过URL传值,在?后附加以=连接的键值对,各键值对间以&连接:也可以通过URL传递页面参数,在”#”后附加的方式.两者最大的一个区别在于:后者不会发起请求,不会导致页面刷新.常见应用场景在于:不需要请求服务器,由浏览器端脚本直接定位到某个条件下的页面展示.例如:在这个页面中http://www.istartedsomething.com/bingimages/#20101106-us,带hash值打开的是展示某个大图的页面,不带hash值打开(http://www.istartedsom…

jQuery hashchange监听浏览器url变化

$(window).bind('hashchange', function() { // });…

快速构建H5单页面切换骨架

在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用程序,应用中所有的视图都包含在这个HTML页面中,并通过JavaScript控制相关视图的显示和隐藏,这种模式可以让用户在Web App感受Native App的速度和流畅.本篇文章的目的就是教你如何来快速的构建一个H5单页面切换骨架. 一. 页面设计在构建SPA应用时,首先要确定你的应用需要包含…

用原生js做单页应用

最近在公司接到一个需求,里面有一个三级跳转.类似于选择地址的时候,选择的顺序是:省份->市->区.如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦.所以可以用js把这一块做成单页应用的样子... 主要思路通过改变url的hash值,跳到相应模块.先把默认模块显示出来,其他模块隐藏,分别给三个模块定义三个hash值,点击默认模块的选项的时候,改变hash值,同时在window上监听hashchange事件,并作相应模块跳转逻辑处理.这样即可模拟浏览器的前进后退,而…

JavaScript权威设计--事件处理介绍(简要学习笔记十七)

1.事件相关概念事件类型:一个用来说明发生什么类型事件的字符串事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有关该事件详细信息的对象. 事件传播:是浏览器决定哪个对象触发其事件处理程序的过程. 事件捕获:在容器元素上注册的特定处理程序有机会再事件传播打破真实目标之前拦截它. 阻止标签默认事件的发生 2.Window事件 focus,blur不冒泡.focusin,focusout冒泡. load当文档和…

使用backbone的history管理SPA应用的url

本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是其中的两个难点.就url的管理而言,主要有以下三方面的要求: 1)对于要采用单页跳转的链接,不能有页面刷新: 2)浏览器的前进和后退,都能像多页应用那样,显示之前访问地址对应的内容: 3)应用处于任何一个单页链接地址时,当用户刷新,依然能初始化显示该地址对应的内容. 假如要自己来实现一个能够满足以上…

使用h5的history改善ajax列表请求体验

信息比较丰富的网站通常会以分页显示,在点“下一页”时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是可以区分优劣.一个小的细节是能否支持浏览器“后退”和“前进“键.本文讨论两种方法,让浏览器可以后退和前进,或者说让ajax就像重定向到新页面一样拥有能够返回到上一页或者前进到下一页. 数据实现分页显示,最简单的做法是在网址后面加多个page的当数,点“下一页”时,让网页重定向到page+1的新地址.例如新浪的新闻网就是这么做的,通过改变网址实现:i…

【blade利刃出鞘】一起进入移动端webapp开发吧

前言在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说第一阶段:使用传统方式开发移动站点,少量引入HTML5元素第二阶段:框架化,使用jquery mobile框架,发现慢,组件不好管理,不好维护给搞掉了第三阶段:jquery+Backbone的组合,最后为了瘦身将jquery换成了zepto 第四阶段:框架适应Hybrid版本,Hybrid相关频道与H5站点一套代码,业务扩展遍地开花第五阶段:框架适应…

url中的特殊符号含义

1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username 这是主流网站第一次将"#"大规模用于重要URL中.这表明井号(Hash)的作用正在被重新认识.本文根据HttpWatch的文章,整理与井号有关的所有重要知识点. 一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置…

weui 多网页切换效果分析

weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.icon等各式元素. 严格的讲它是一个css库.算一个精简的库. 如果要用jQuery开发的话,head部分,需要加载如下信息: <head> <meta charset=&quo…

[vue案例的知识点]todo-list

文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储,为了方便,此处将数据存储到客户端的缓存中,使用localStorage,他的主要api有 localStorage.getItem(key)和localStorage.setItem(key,value) 二.对于localStorage中的数据采取json数组形式保存,因此在保存value和获取时…

【hashchange】的更多相关文章