首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

window.onhashchange事件

2014年04月22日 发布 阅读(597) 作者:懒炖

前言

hashchange事件会在浏览器地址的hash值改变时被触发。这是html5新增的一个事件,IE6/IE7及IE8兼容模式不支持onhashchange,但IE8标准模式支持onhashchange。这对于基于ajax开发的web应用程序是非常有用的一个事件,因为ajax请求不能触发浏览器添加新的历史条目,使得“前进”“后退”按钮在ajax开发的应用程序中不能使用。而hashchange事件+隐藏的iframe可以为我们解决这难题

浏览器对hashchange事件的支持

ChromeFirefox (Gecko)Internet ExplorerOperaSafariIPHONEAndroid
5+3.6 (1.9.2)+8.0+(标准模式)11.60+5.0+5.0+2.2

onchange事件属性

属性类型描述
target 只读EventTarget浏览器上下文 (window)
type 只读DOMString事件类型.
bubbles 只读boolean是否允许事件冒泡?(默认可以)
cancelable只读boolean是否可以取消事件?(默认不可以)
oldURL 只读string前一个URL
newURL 只读string新的URL

对于IE6/7不支持hashchange的情况,我们可以使用setInterval不断去读取hash值(location.hash),判断hash是否发生变化,如果发生变化则调用回调。如下代码:

  1. (function (window) {
  2. // 检测浏览器是否支持"onhashchange"事件
  3. // 注意document.documentMode===undefined,这里undefined不能使用字符串""undefined"
  4. if (!("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7)) {
  5. var location = window.location, oldURL = location.href, oldHash = location.hash;
  6. // 每100ms检测hash是否有变化
  7. setInterval(function () {
  8. var newURL = location.href, newHash = location.hash;
  9. // 如果hash有变化则调用onhashchange回调
  10. if (newHash != oldHash && typeof window.onhashchange === "function") {
  11. // 调行回调函数
  12. window.onhashchange({
  13. type: "hashchange",
  14. oldURL: oldURL,
  15. newURL: newURL
  16. });
  17. oldURL = newURL;
  18. oldHash = newHash;
  19. }
  20. }, 100);
  21. }
  22. window.onhashchange = function () {
  23. alert("location.hash is changed");
  24. };
  25. })(this)

location.hash使用注意:

1、IE6会忽略问号部分

如 ../index.html#a?color=#fff ->location.hash返回#a

2、Firefox会对URL进行decodeURIComponent转码

如../index.html#a?name=%22jerman%22” ->location.hash会返回 #a?name=”jerman”

3、使用location时,我们最好使用window.location或不是直接调用location,直接调用location firefox下会检测不到

我们可以使用正则表达式返回一个兼容的hash

  1. function getHash(url){
  2. var url = url || window.location.href;
  3. return '#' + decodeURIComponent(url.replace( /^[^#]*#?(.*)$/, '$1' ));
  4. }

参考资料:

https://developer.mozilla.org/en-US/docs/Web/API/Window.onhashchange

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/hashchange

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • canvas封装工具类

    收集的一些Canvas工具类,有库,有框架,有api,会持续更新

    发布:2019-03-04 阅读(465)

  • html之”aria-*“标签

    ARIA是W3C的一个规范。其全称是’Accessible Rich Internet Applications’,是WAI-ARIA的一部分(它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南)。 WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

    发布:2019-01-30 阅读(539)

  • window.onhashchange事件

    hashchange事件会在浏览器地址的hash值改变时被触发。这是html5新增的一个事件,IE6/IE7及IE8兼容模式不支持onhashchange,但IE8标准模式支持onhashchange。这对于基于ajax开发的web应用程序是非常有用的一个事件,因为ajax请求不能触发浏览器添加新的历史条目,使得“前进”“后退”按钮在ajax开发的应用程序中不能使用。

    发布:2014-04-22 阅读(597)

  • HTML5 对history新增的API:pushState,replaceState,state,popstate

    基于MVC设计模式和ajax技术实现单页面结构时,如果实现前进后退功能呢?这在以前我们可以采用hash方法,但终究不是很完美,我们在访问facebook或google的一些页面时会发现,页面不仅实现了局部刷新,而且页面URL也发生了变化。这就是HTML5对history的贡献.

    发布:2014-04-22 阅读(786)

  • 语义化HTML-语义化你的HTML标签或属性

    HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义

    发布:2012-10-21 阅读(670)