前言
本文主要给大家介绍了关于利用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的作用或许远不止这些,以后如有遇到再同大家一起分享。希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。