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

2023-09-23 13:32:05 52

前言

本文主要给大家介绍了关于利用JShash制作单页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方式**/
点击改变hash

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

二、hash有何用处

1.设置锚链接

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

2.实现单页应用的制作

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

三、何为单页Web应用

单页Web应用（singlepagewebapplication，SPA），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

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

四、如何使用hash制作SPA

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

1.首先写好HTML结构


第一页

第二页第三页

第一页
第二页
第三页

2.然后为其设置CSS样式

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

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

window.onload=function(){
varnav=document.getElementById('nav');
varnavLi=nav.getElementsByTagName('li');
for(vari=0,len=navLi.length;i
这里有几个地方需要注意的是，IE并不兼容oldURL和newURL这两个属性，所以该方法有一定的局限性。当然，更好的方法是，一开始将hash值用变量存起来作为oldHash，具体方法如下：
/****前面代码省略****/
location.hash='page1';
varoldHash=location.hash;
window.onhashchange=function(e){
varnewHash=location.hash;
varoldPage=document.querySelector(oldHash);
varnewPage=document.querySelector(newHash);
oldPage.classList.remove('cur');
newPage.classList.add('cur');
oldHash=newHash;
};
这里还有一个地方需要注意，就是classList在IE9及其以下浏览器不兼容，最好通过处理className属性的方式来实现相同的效果，此处便不再详述。
总结
以上就是这篇文章的全部内容了，当然，hash的作用或许远不止这些，以后如有遇到再同大家一起分享。希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

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

热门推荐

随机推荐