利用JS hash制作单页Web应用的方法详解


Posted in Javascript onOctober 10, 2017

前言

本文主要给大家介绍了关于利用JS hash制作单页Web应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

一、何为hash

这里要讲的hash(也叫哈希),指的是JS中location对象的hash属性,它返回的是URL中#后所跟的零个或多个字符。通常,我们可以通过location.hash的方式获取哈希值或设置哈希值。当然,我们也可以通过设置a标签的href属性来设置哈希值,当用户点击该a标签时即可改变页面的哈希值。

例如:

/** JS方式 **/
location.hash = 'hash'; //设置hash,该代码执行后URL后面增加“#hash”字符串
console.log(location.hash); //获取hash
/** HTML方式 **/
<a href="#hash" rel="external nofollow" >点击改变hash</a> <!-- 点击后URL后面增加“#hash”字符串 -->

值得注意的是,无论以何种方式改变哈希值,页面都不会刷新。

二、hash有何用处

1. 设置锚链接

通过设置锚链接(即为上述HTML方式),可使点击链接后页面根据元素id滑动到指定位置,即使页面跳转后也不例外。

2. 实现单页应用的制作

可以根据哈希值的变化来使相应元素显示或者隐藏,从而实现页面无刷新的单页切换。

三、何为单页Web应用

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

以上是百度百科对单页应用(SPA)的解释,而使用hash可以非常方便的实现“页面”间的切换。

四、如何使用hash制作SPA

简单来说,就是先只显示第一个page,然后通过改变hash值来切换显示不同的page,前一个page隐藏。
这里写个简单的Demo演示一下吧:

1. 首先写好HTML结构

<article class="container">
 <section id="page1" class="page cur">第一页</section>
 <section id="page2" class="page">第二页</section>
 <section id="page3" class="page">第三页</section>
</article>
<nav id="nav" class="bottom-nav">
 <ul>
  <li>第一页</li>
  <li>第二页</li>
  <li>第三页</li>
 </ul>
</nav>

2. 然后为其设置CSS样式

.page{ display: none; /* 其他样式省略 */}
.page.cur{ display: block;}
/* 其他样式省略 */

3. 编写Javascript,实现单页切换

window.onload = function () {
 var nav = document.getElementById('nav');
 var navLi = nav.getElementsByTagName('li');
 for(var i = 0,len = navLi.length; i < len; i++){
  (function (i) { 
   navLi[i].onclick = function () { //点击nav中的li,改变hash值
    location.hash = 'page' + (i+1);
   }
  })(i);
 }
 location.hash = 'page1'; //每次页面重新加载时都回到page1
 window.onhashchange = function (e) { 
  //当hash变化时,执行hashchange事件,该事件具有oldURL和newURL两个事件属性,分别代表前一个URL和目前的URL
  var oldHash = e.oldURL.split('#')[1]; //取得前一个hash
  var newHash = e.newURL.split('#')[1]; //取得当前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove('cur'); //隐藏前一个page
  newPage.classList.add('cur');  //显示当前page
 };
}

这里有几个地方需要注意的是,IE并不兼容oldURL和newURL这两个属性,所以该方法有一定的局限性。当然,更好的方法是,一开始将hash值用变量存起来作为oldHash,具体方法如下:

/**** 前面代码省略 ****/
location.hash = 'page1';
var oldHash = location.hash;
window.onhashchange = function (e) {
 var newHash = location.hash;
 var oldPage = document.querySelector(oldHash);
 var newPage = document.querySelector(newHash);
 oldPage.classList.remove('cur');
 newPage.classList.add('cur');
 oldHash = newHash;
};

这里还有一个地方需要注意,就是classList在IE9及其以下浏览器不兼容,最好通过处理className属性的方式来实现相同的效果,此处便不再详述。

总结

以上就是这篇文章的全部内容了,当然,hash的作用或许远不止这些,以后如有遇到再同大家一起分享。希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
jQuery 操作XML入门
Dec 25 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
JavaScript如何获取到导航条中HTTP信息
Oct 10 #Javascript
使用Dropzone.js上传的示例代码
Oct 10 #Javascript
React中上传图片到七牛的示例代码
Oct 10 #Javascript
基于对象合并功能的实现示例
Oct 10 #Javascript
聊聊Vue.js的template编译的问题
Oct 09 #Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
简单的js计算器实现
2016/10/26 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
JsChart组件使用详解
2018/03/04 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
运动会闭幕式主持词
2015/07/01 职场文书
运动会入场词
2015/07/18 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
LeetCode189轮转数组python示例
2022/08/05 Python