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

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

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

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

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. Oracle 正则表达式使用示例

    正则表达式的基本例子 在使用这个新功能之前,您需要了解一些元字符的含义.句号 (.) 匹配一个正规表达式中的任意字符(除了换行符).例如,正规表达式 a.b 匹配的字符串中首先包含字母 a,接着是其它 ...

  2. iOS 里面 Swift与Objective-C混编,Swift与C++混编的一些比较

        即使你尽量用Swift编写iOS程序,难免会遇到部分算法是用C++语言编写的.那你只能去问问”度娘“或“狗哥”怎么用Swift调用C++算法.   一,C,C++, Objective-C,S ...

  3. .NET工程师技术进阶

    通常,一个人对技术的掌握程度可以分为精通.熟练.熟悉.了解,详细解析如下: 精通:能够掌握此技术的85%技术要点以上,使用此技术时间超过两年,并使用此技术成功实施5个以上的项目.能使用此技术优化性能或 ...

  4. 初试Node —— node.js的安装

    可以在这里查看最新版本: http://nodejs.org/download/ 在Mac下安装相当简单,只需要下载Mac OS X Installer (.pkg),然后一路下一步即可. 在Linu ...

  5. Java连接MySQL数据库——含步骤和代码

    工具:eclipse MySQL5.6 MySQL连接驱动:mysql-connector-java-5.1.27.jar 加载驱动: 1. 在工程目录中创建lib文件夹,将下载好的JDBC放到该文件 ...

  6. 基于Clang的Source to Source源代码转换(一)

    Clang中包含了非常多的关于抽象语法树(AST)的访问和操作的类和接口.我们程序开发人员可以直接通过继承其中的某些类,重写其中的关键成员方法,从而形成我们自己的对抽象语法树的操作. 那么,首先我们简 ...

  7. webapi mvc session一直获取不到问题

    前一段时间在给移动端写接口时遇到一个调用接口发送邮箱 session 一直获取不到的问题.我来给遇到问题的同志们说一说 自个在网上查了好多资料,问了一些朋友后.终于找到解决方案了. 大家都知道weba ...

  8. 微信支付:curl出错,错误码:60

    如下是运行微信支付测试代码时出错代码: Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘ in ...

  9. libevent源码分析:time-test例子

    time-test例子是libevent自带的一个例子,通过libevent提供的定时事件来实现,间隔固定时间打印的功能. /* * gcc -g -o time-test time-test.c - ...

  10. html5移动端知识点总结

    第一章,控制html字体大小 1.1使用媒体查询,不同分辨率设置不同的html的font-size   @(min-width:320px){ html{font-size:10px;} } @(mi ...