`
zhangyaochun
  • 浏览: 2614947 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

谈谈hashchange

阅读更多

谈谈html5的hashchange

 

------- 在URL的参数列表(及URL中"#"号后面的所有字符串)发生变化的时候触发

 

 

EventUtil.addHandler(window,"hashchange",function(event){
      alert("old URL:"+event.oldURL+ "\nNew URL:"+event.newURL);
});

 

 

  • hashchange事件处理程序添加给window对象
  • event对象有两个属性:oldURLnewURL
 
兼容性
 
  • IE8+ | FF3.6+ | Safari5+ | Chrome | Opera 10.6+ 支持hashchange
  • FF3.6+ Chrome Opera支持 oldURL 和 newURL
 

 
 
来自《JavaScript高级程序设计第3版》
 
 
  • 大小: 73.3 KB
分享到:
评论

相关推荐

    前端项目-jquery-hashchange.zip

    《前端项目:jQuery HashChange 插件深度解析》 在前端开发中,处理浏览器URL的哈希(#)部分变化是实现页面无刷新更新、单页应用(SPA, Single Page Application)导航的关键技术之一。jQuery HashChange 插件正是...

    jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    而 `jquery.hash.min.js` 和 `jquery.ba-hashchange.min.js` 这两个文件则是在 jQuery 基础上扩展了对浏览器 URL hash 变化的处理,从而实现单页面应用(Single Page Application, SPA)中后退和前进按钮的刷新功能...

    Hashchange

    HashChanger

    JQuery HashChange插件修改.rar

    《jQuery HashChange插件修改详解》 在Web开发中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互等任务。而HashChange事件是HTML5引入的一个新特性,允许开发者监听浏览器URL...

    javascript-hashchange事件和历史状态管理实例分析

    JavaScript中的`hashchange`事件和历史状态管理是前端开发中处理浏览器历史记录和页面状态的重要机制。`hashchange`事件允许我们监听URL哈希值(#后面的字符串)的变化,并据此执行相应的逻辑。历史状态管理则提供了...

    jquery.hashchange.ext

    《jQuery Hashchange 扩展详解》 在前端开发中,jQuery 是一款广泛使用的 JavaScript 库,它极大地简化了 DOM 操作、事件处理以及Ajax交互。然而,原生的 jQuery 并不直接支持对浏览器 URL hash(#)部分的监听和...

    KOHash:淘汰HashChange PagerJS之类的框架

    【标题】"KOHash:淘汰HashChange PagerJS之类的框架"涉及到的是前端开发中关于路由管理和页面状态管理的知识点。在Web应用中,尤其在单页应用程序(SPA)中,路由管理是至关重要的,它允许用户在不刷新整个页面的情况...

    routed:非常轻量级和简单的 hashchange 调度器,1KB 库

    非常轻量级和简单的 hashchange 调度程序。 安装 只在浏览器中运行: < script src = "dist/routed.min.js" > < / script > 或者客户端模块加载器: var Routed = require ( 'routed.js' ) 发射 ...

    mootools-history:通过popstate或hashchange进行历史记录管理

    通过popstate或hashchange进行历史记录管理。 在不重新加载的情况下替换页面的URL,并在较旧的浏览器上回退到Hashchange。 该插件是MooTools 一部分 。 建造 通过构建,需要和已注册到Packager packager ...

    router:最简单的 hashchange 正则表达式路由器

    哈希正则表达式路由器用于客户端 hashchange 正则表达式路由器。 适用于 Chrome 5、Firefox 3.6 和 IE 10+。 路由按添加顺序进行处理。示例/API 基本用法: route ( / ^ about / , function ( ) { console . log ( '...

    js实现自定义路由

    在本文中,我们将详细探讨使用JavaScript实现自定义路由的方法,特别是通过hashchange事件进行路由控制。本文所提供的方法对于前端开发者在处理客户端路由时具有较高的参考价值,可以帮助开发者深入理解前端路由的...

    hash-listener:替代 hashchange 事件

    哈希监听器 哈希监听器替代 npm i hash-listener用法 HashListener = require ' hash-listener 'hl = new HashListenerhl . start (hash, newURL, oldURL) -> 或者 < script src =" build/hash-listener.js " &gt...

    对ajax前进后退的处理

    在AJAX应用中,我们可以利用`hashchange`事件来监听`hash`值的变化。当用户点击前进或后退按钮时,浏览器会触发这个事件,我们可以在事件处理函数中根据新的`hash`值加载相应的数据,从而实现无刷新的页面导航。 ...

    jQuery UI Multiselect (jQuery UI 多选框)

    **jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件,它针对HTML的`<select>`元素提供了增强的多选功能。这个控件设计得更加直观且用户友好,使得用户在网页应用中进行多选操作时能有更佳的体验。...

    前端大厂最新面试题-React Router model.docx

    在HashRouter组件中,使用window.addEventListener('hashChange', callback)监听hash值的变化,并传递给其嵌套的组件,然后通过context将location数据往后代组件传递。 2. History模式 History模式允许操作浏览器...

    JS 获取链接(url)参数以及锚链接(anchor)结合富ajax的应用(ajax前进/后退的问题)

    window.dispatchEvent(new HashChangeEvent('hashchange')); ``` 现在,我们来看如何解决Ajax前进/后退问题。当使用Ajax加载新内容时,浏览器的历史记录不会自动更新,导致前进/后退功能失效。为此,可以使用`push...

    vue地址栏直接输入路由无效问题的解决

    总结来说,解决Vue地址栏直接输入路由无效的问题,可以通过调整Vue Router的模式,或者监听`hashchange`事件并在组件内动态修改路由。对于不支持`hashchange`事件的老版本浏览器,可以添加特定的兼容性代码。这些...

    前端项目-html5-history-api.zip

    这通常涉及到使用条件语句检测浏览器是否支持History API,如果不支持,则可能使用hashchange事件或其他的回退策略来模拟类似的行为。 **Hashchange事件**:在老版本的浏览器中,可以利用URL的哈希部分(#后面的...

    js锚点定位

    2. **事件监听**:可以监听`window`对象的`hashchange`事件,当URL的哈希值改变时,执行相应的回调函数,实现动态响应式的锚点定位。 ```javascript window.addEventListener('hashchange', function() { var hash...

Global site tag (gtag.js) - Google Analytics