利用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 相关文章推荐
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
认识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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
angular中使用Socket.io实例代码
2017/06/03 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python运行时间的几种方法
2016/06/17 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
基于python指定包的安装路径方法
2018/10/27 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python实现合并两个排序的链表
2019/03/03 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
python实现ping命令小程序
2020/12/28 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
外企求职信范文分享
2013/12/31 职场文书
三八活动策划方案
2014/08/17 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL