利用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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP禁止页面缓存的代码
2011/10/23 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
局域网标准
2016/09/10 面试题
审计主管岗位职责
2014/01/31 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
假期安全教育广播稿
2014/10/04 职场文书
自主招生自荐信范文
2015/03/04 职场文书
简爱读书笔记
2015/06/26 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python