利用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的简单九宫格实现代码
Aug 09 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php通过字符串调用函数示例
2014/03/02 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP7变量处理机制修改
2021/03/09 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
详解Django配置JWT认证方式
2020/05/09 Python
Python Merge函数原理及用法解析
2020/09/16 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
简历中自我评价分享
2013/10/09 职场文书
校园之声广播稿
2014/01/31 职场文书
活动策划邀请函
2014/02/06 职场文书
借款协议书
2014/09/16 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
销售业务员岗位职责
2015/02/13 职场文书
让世界充满爱观后感
2015/06/10 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
python基础之错误和异常处理
2021/10/24 Python