有的时候,我们会希望屏蔽一些地区对于某一些页面的访问,又不想通过修改后台程序(比如一些内容管理程序,都是直接生成纯静态的html页面)来实现,那我们要怎么做呢,这里要解决的问题就是要动态的判断访客的ip或ip归属地,然后通过结果来判断是否屏蔽以及屏蔽后要返回的的提示内容。所以我们可以利用js来完成,真正意义的js最好链接的动态服务器脚本,这样能实现更灵活而强大的功能。

效果为,我屏蔽了北京地区的ip,提示效果:

js链接为:<script type=”text/javascript” src=”http://www.tnbrj.com/api/ipapi.php”></script>

理论上,这个js如果你加到你的任何一个页面中也会有同样的效果,会屏蔽北京的ip,下面我们看一下这个ipapi.php代码是如何写的;

 

来分析一下代码,有人奇怪js为什么链接php文件,其实这就是大家固有思维,其实这就和验证码是一个原来,验证码的src链接的也是一个服务端文件,而这个文件只是把数据作为图片格式返回了而已,而js就更简单,服务数据处理的代码不会被返回,只有输出的东西会被返回,所以如果你要实现什么js功能,只需要在服务端文件输出即可,比如输出alert(‘ok’);那页面就会弹出ok,并且这样的服务端函数同样支持,我们同样可以通过这个文件调用接口,获取用户ip,读取数据库等等,是不是就功能更加强大和灵活,这些我们之前就说过了,就不多说,今天主要说说这个功能。首先head声明,是声明了页面编码为utf-8,这里的作用就是必要一些页面编码不是utf-8的页面在调用这个文件的时候会出现乱码,加上这个,和ipapi.php本身编码一致的声明后,就绝对不会出现乱码了。这个可以看一下我之前写的《你的页面为什么乱码了》,这样就比较方便了,因为js文件没有像html等文件那样,有声明编码的函数,而我们调用js的时候一般也不会写charset,那么这样浏览器会以页面本身的编码去解析这个js,那么如果他们的编码不统一,就会出现乱码,而如果js文件用php文件代替,就有了这样的函数,就可以更加的灵活了。当然相应的,他会被php解析一下再返回,会影响一下效率,但是一般我们的功能不会特别复杂,这个几乎是可以忽略不计的。

下面的这个$cip是获取用户的真实ip,为什么这么说呢,因为有的时候,我们的项目可能通过服务器代理的方式运行,这个时候我们仅通过REMOTE_ADDR获取的ip都会是127.0.0.1,然后,我们通过《ip归属地接口》获取访客的地址,下面如果他是北京的,当然因为我也是北京的,要把自己的ip和公司ip排除一下,然后组织提示内容。这里如果你要提示一段文字,那么很简单,无论你是用createClement创建一个标签,还是用document.write写入都可以,但是因为这里我们要加一个图片,这就比较麻烦了一些,我们要知道,页面的执行顺序是从上往下,js也是,如果我们之间写入或创建这个img标签,下面紧接着写window.stop ? window.stop() : document.execCommand(“Stop”);来让页面停止运行,那么因为图片的加载是需要一个时间的,而同一个js中虽然是从上往下,但是他不会等这一段执行完再执行下面的语句,而是从上到下依次连续的触发。也就是说,我们会把这个img写入成功,但是图片还没有来得及加载上就会被停止执行,就会造成兼容问题,而如果我们写入到两个js中,那么这样就会有了先后顺序,给了图片加载的时间,所以这里才会用write再将停止执行的js写入,而这里为什么不用createElement创建呢,因为这个函数过于的缓慢,会让页面加载一部分再执行,所以我们要实现比较快的写入立即执行。

这就是整个的过程,希望对大家对js理解有了新的帮助! 

程序本天成,妙手偶得之!我们只是代码的搬运工!

转载请注明:http://www.521php.com/archives/1352/

目前有8 条留言

  1. 2013年06月06日 下午 4:06 中央空调系统   |  引用  |  #1     

    这个过程很繁琐

    • 2015年01月21日 下午 3:02 saber   |  引用  |  #2     

      感谢~你是调用的纯真的IP数据库吗?我是把你代码复制下来改的,成功了。只是那个stop.js停止页面加载我这里不行,只好做了个跳转。

      • 2015年01月22日 下午 1:27 地狱中仰望天堂   |  引用  |  #3     

        恩,是用的腾讯的纯真ip库,他会定期更新,你百度能找到,其实也可以使用一些ip接口,很多的。

        • 2017年07月31日 上午 9:29 tjw   |  引用  |  #4     

          你的加了没反应

    • 2015年02月05日 上午 10:47 hao2345导航   |  引用  |  #5     

      我这里添加了,怎么哪里都打不开了呢?

  2. 2013年06月13日 上午 10:03 中央空调风机盘管   |  引用  |  #6     

    不好做啊

  3. 2017年07月31日 上午 9:29 tjw   |  引用  |  #7     

    加进去没反应

发表评论

昵称:

网址:

eg.博客主题调用的是Gravatar头像,你可以通过邮箱注册获得头像.
/ 快捷键:Ctrl+Enter