【硬核原创】网站标题根据用户变化而变化
最近有朋友问我 www.timicm.com 这个网站的标题效果什么实现的,本着无私奉献的精神和你们分享一下
title是不断变化的,怎么变化呢?
当你访问这个网站的时候他会先获取你的本地IP并且通过第三方库查询IP的归属地,然后在将获取到的归属地传给HTML。
其实就这么简单,实际操作也不难,废话不多说,开凎。
开始之前先给大家推荐一个免费的IP查询接口
http://ip.ws.126.net/ipquery 这个接口是免费的、支持https协议,而且是通过js的形式返回数组格式
有了接口然后是敲逻辑
因为上面的接口都是会默认获取用户当前的ip,所以不需要单独做处理了
我写代码更倾向于简介高效,所以我选择了jQuery
//1、引入jq官方包,如果你项目里有jq就忽略这一步 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> //2、直接通过script标签引入上面那个接口,我拿第二个举例说明 <script src="https://ip.ws.126.net/ipquery"></script> //返回的数据为:var lo="山东省", lc="济南市"; var localAddress={city:"济南市", province:"山东省"} 得到了数据直接给title赋值不就好了吗 $(document).attr('title',"欢迎来到:" + lo + lc + "的门户"); //输出 欢迎来到:山东省济南市的门户
就这么简单,你以为呢?
进阶篇
通过上面就可以实现标题随用户位置变化而变化了,但是接口并非完美无瑕,有时候或获取不到用户所在的市,只能获取省份,
那么我们就要先判断一下有没有获取到,没获取到就返回省份
if(lc==""){ $(document).attr('title',"欢迎来到:" + lo + "的门户"); //输出 欢迎来到:山东省的门户 }else{ $(document).attr('title',"欢迎来到:" + lo + lc + "的门户"); //输出 欢迎来到:山东省济南市的门户 } //如果你想把位置里的省和市这两个字去掉也不是不可以,通过严谨的分析研究发现,他们有一个共同点就是在位置的最后一位 //我们获取到的数据把最后一位截掉不就好了吗? let newLo = lc.substr(0, lo.length - 1); let newLc = lc.substr(0, lc.length - 1); if(newLc==""){ $(document).attr('title',"欢迎来到:" + newLo + "的门户"); //输出 欢迎来到:山东的门户 }else{ $(document).attr('title',"欢迎来到:" + newLo + newLc + "的门户"); //输出 欢迎来到:山东济南的门户 }
以此类推,改网站的描述、关键词、等一些文字就会了吧?
版权声明:本文由 LzxBlog 发布,如需转载请注明出处。