DOM hash

前段时间做的一个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 {
  }
})
时间: 2024-10-19 14:22:33

DOM hash的相关文章

JSONP / DOM / BOM 部分总结

#JSONP 跨域请求 JSONP原理:通过动态创建script标签,利用其scr跨域的属性,访问其他域的服务器,请求数据并通过回调函数返回请求的结果 20:26 2017/7/13 突然发现在记事本按F5可以自动写出当前日期和时间,美滋滋 1.递归函数应该始终使用arguments.callee来递归的调用自身. 不要使用函数名 (函数名可能会发生变化)2.匿名函数 也叫 拉姆达函数3.关于闭包的作用域: 闭包的作用域链包含着它自己的作用域. 包含函数的作用域和全局作用域 通常,函数的作用域及

JS学习四(BOM DOM)

BOM                Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 console.log(window.availWidth);//屏幕可用宽度 console.log(window.availHeight);//屏幕可用宽度 ★  location对象 取到浏览器的URL地址信息: 完整的URL路径: 协议名://主机名(IP地址):端口号/文件所在路径?传递参数(nam

DOM解析xml实现读、写、增、删、改

qt提供了三种方式解析xml,不过如果想实现对xml文件进行增.删.改等操作,还是DOM方式最方便. 项目配置 pro文件里面添加QT+=xml include <QtXml>,也可以include <QDomDocument> pro文件: [plain] view plain copy print? QT       += core xml QT       -= gui TARGET = xmltest CONFIG   += console CONFIG   -= app_

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名

javascript知识点之DOM与window对象

在学习javascript过程中只是一知半解好多,碰到自己不知道属性方法,到最后都不知道自己学到了什么 js代码为什么这样写 为什么你知道这方法或属性可以这样用. DOM和window对象 DOM基本操作: 获得节点: document:通过元素ID获取节点,标签,name属性 节点指针:获取元素首个子节点,最后一个,子节点列表,兄弟节点的前一个后一个,节点的父节点 节点操作: 创建节点:创建元素节点,属性节点,文本节点 插入节点:节点的子节点添加新的子节点  已有节点前插入新子节点 替换节点:

上层建筑——DOM元素的特性与属性(dojo/dom-prop)

上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.value disabled.checked等无状态特性对应于属性中的布尔变量 事件的处理 那这一节,我们便来看看prop对于属性的处理. 首先是一个标准名称字典,将要设置的属性名重新命名,避免与保留字的冲突: exports.names = { // properties renamed to avoi

Ajax保留浏览器历史的两种解决方案(Hash&amp;Pjax)

总是在github down点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果,但是发现这个特效能够导致浏览器地址栏跟随变化,并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~ 一.通过锚点Hash实现: 在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的.但不是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推

DOM基本知识点

1.DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动. document.documentElement 返回文档的根节点 document.body document.activeElement 返回当前文档中被击活的标签节点(ie) event.fromElement 返回鼠标移出的源节点(ie) event.toElement 返回鼠标移入的源节点(ie) event.srcElement 返回激活事件的源节点(ie) event.target 返回激活事件的源节点(f

JS中的BOM以及DOM操作

screen:对象 console.log(screen.width);//屏幕宽度   console.log(screen.availHeight);//可用高度=屏幕高度-底部任务栏   console.log(screen.height);//屏幕高度   console.log(screen.availWidth);//可用宽度 location对象    *     * 完整的URL路径:    * 协议://主机名(IP地址):端口号/文件路径?传递参数(name1=value1&