通过第三方IP地址库控制前端内容分区域显示

作者: wxfeng 分类: web前端 发布时间: 2017-04-14 00:00

为了给网站访客提供更精确的内容,在规划网站前端页面内容时,有时需要针对不同地域的用户,显示不同的内容。

通过后端的程序语言(如php)结合已保存的ip地址库进行判断来实现是一种方案,但在用户访问量比较大的情况下,针对每个访客的ip分别进行逻辑判断,再将内容输出至前端页面,会对服务器造成较大的压力,且效率比较低下,也不利于实现网站前端页面的静态化。

另一种解决方案是在前端通过js来进行判断,控制页面内容的显示隐藏,来实现这种效果。方法如下:

1,引入第三方ip地址库,这里以搜狐提供的api为例:

<script src="http://pv.sohu.com/cityjson" type="text/javascript"></script>

2,引入之后,会返回一个变量,显示客户端用户的外网ip以及区域编号,如下所示

var returnCitySN = {"cip": "1**.6*.***.3", "cid": "410100", "cname": "河南省郑州市"};

3,通过返回的变量内容,利用js进行判断,控制内容的显示,例如:如果客户端用户是来自河南省,则显示“<div id="area">这里的内容分区域显示</div>”这块内容。

<script>
        if((returnCitySN.cid).substr(0,3) == "410"){
            $("#area").show();
        }
</script>

注意:因为是在前端控制,所以在读取内容时,需要将所有区域的内容都读取出来,然后默认隐藏。所以这种方案只适合在被控制区域的内容较少的情况下进行。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注