前段时间做的一个H5专题,用到了hash解决问题,特意记录一下。DOM hash的详细内容可以点击链接查看。

hash就是uri中#及后面的部分,例如:www.google.com.hk#123的#123。当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。

当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发onhashchange 事件 :

  1. window.addEventListener("hashchange",function(){var hash=location.hash.split("#")[1];
  2. if(hash==="0" || typeof hash==="undefined"){
  3. $("#iframe1").remove()
  4. } else if(hash==="1"){
  5. $(".longPage").removeClass("hide");
  6. } else {
  7. }
  8. })

DOM hash的更多相关文章

  1. tab_切换

    记忆: 一.这里用到了jQuery遍历---filter()方法: filter() 方法将匹配元素集合缩减为匹配指定选择器的元素. 二.HTML DOM hash属性 hash 属性是一个可读可写的 ...

  2. LAMP架构三

    PHP相关配置 1.查找php配置文件/usr/local/php/bin/php -i或者phpinfo() [root@bogon admin]# /usr/local/php/bin/php - ...

  3. php 安装扩展插件实例-ftp.so

    工作记录一下   1.首先进入原始php包安装文件(不是安装后的文件,是下载php安装压缩包,解压后的那个文件)安装包里有个扩展文件夹ext,进入 #cd /home/php-5.3.3/ext/#l ...

  4. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  5. 一步步学习javascript基础篇(7):BOM和DOM

    一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...

  6. 公司内部的一篇关于dom方法的分享

    第一部分 dom node类型 nodeType 属性 nodeType 属性返回节点的类型.nodeType 是只读的. 比较重要的节点类型有: 元素类型 NodeType 元素 1 属性 2 文本 ...

  7. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  8. 都别说工资低了,我们来一起写简单的dom选择器吧!

    前言 我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了 然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...

  9. BOM 和DOM

    BOM 1.BOM:浏览器对象模型(Browser Object Model)尚无正式标准: 2.Window 对象:所有浏览器都支持 window 对象.它表示浏览器窗口. 3.Window 尺寸 ...

随机推荐

  1. 自定义指令-directive (转)

    1.指令作用域中的@ 作用是把当前属性作为字符串传递. 前台代码: <div ng-controller="MyCtrl">       <drink water ...

  2. vbs 中文字符串

    vbs 字符串包含中文字符,文件以UTF-8无BOM格式保存,就会出现“编译器错误: 未结束的字符串常量”错误,改以ANSI保存就没有这个问题

  3. C#:获取环境信息

    外部环境数据1.需要管理员权限2.需要安装office2003以上完整版3.需要安装flash reader 10.0以上4.需要安装adodb reader;Adobe Acrobat X Pro; ...

  4. 将光标放到input内容的最后

    在使用setSelectionRange方法的时候一定要加setTimeout,否则无效,代码 var num = $('#input_phone').val().length; setTimeout ...

  5. 查看/关闭SElinux (原创帖,转载请注明出处)

    查看SELinux状态: 1   /usr/sbin/sestatus -v | grep "SELinux status:" ##如果SELinux status参数为enabl ...

  6. JavaScript浏览器对象(BOM)中有关设备、浏览器屏幕高度和宽度的API介绍

    JavaScript世界中,有很多看起来能够帮我们知道网页宽度和高度的API,但太繁多了,而且容易弄混.不容易区分它们.下面我就来介绍一下,这些API到底是什么意思,之间的区别又在哪里. 一.设备的分 ...

  7. Java 动态生成复杂 Word

    Java 动态生成复杂 Word 阅读目录 1. 制作 Word 模版,将你需要动态生成的字段用${}替换.2. 将 Word文档保存为 xml .3. 引入项目. 项目中需要用 java 程序生成d ...

  8. Spring+quartz整合问题

    今天一开始在弄quartz的时候用的2.0.2的jar包整合Spring3.0.5的时候报错 Java.lang.IncompatibleClassChangeError: class org.spr ...

  9. 迈出第一步:自适应高度的ImageView(AutoHeightImageView)

    这个博客注册很久了,可是一直都没有勇气来写一点东西.今天解决了一个让我纠结很久的问题,于是,我决定开始我的博客生涯,希望我能坚持下去. 不知道是不是只有我遇到了这个问题,在ListView中显示图片, ...

  10. 微信小程序-设备

    网络状态: wx.getNetworkType(OBJECT) 获取网络类型. OBJECT参数说明: wx.getNetworkType({ success: function(res) { var ...