前言：
当前我们对“html判断wifi”大约比较关切，同学们都想要了解一些“html判断wifi”的相关内容。那么小编在网摘上搜集了一些对于“html判断wifi””的相关文章，希望兄弟们能喜欢，看官们一起来了解一下吧！说说应用过程，下面用手机QQ浏览器为例。在路由器搭建免费WIFI，用户连接免费WIFI后，使用手机QQ浏览器点击打开任意网页即可自动通过认证并上网，有的手机会自动打开认证网页，如果使用其他手机浏览器则自动跳转到引导认证页面，设置24小时认证一次即可保证用户每天使用手机QQ浏览器了。
说说需求，这功能可用于微信吸粉、广告推广、推广手机浏览器等，应用环境：可用于网吧、店铺、街边、酒店、车站等人多的地方。下面图片是小编做的一个演示页面。
免费WIFI引导页面
此页面为引导认证页面，也就是连接免费WIFI后使用其他手机浏览器打开网页的时候跳转的引导安装手机浏览器页面。点击 免费上网 会下载 手机QQ浏览器，点 试用网络 会有一段时间免费使用，试用到期后会自动断开。我们指定的是手机QQ浏览器打开，如果使用手机QQ浏览器打开会出现认证成功页面（如下图）。
WIFI认证成功页面
实现此功能的原理是通过手机浏览器UA来判断，全称：userAgent，如果不懂什么是UA的朋友可以百度搜索一下，这里就不做陈述了。
如果要实现这种效果，需要准备下面的东西：
1. 广告路由器（一般某宝有的买，如果大家有技术，可以刷爱快路由固件。）
2. 软路由程序（小编使用的是爱快，本教程就使用爱快为例给大家演示。）
3. 网站服务器 （可使用免费或者收费的服务器，为了稳定推荐使用收费服务器）
4. 判断手机QQ浏览器的源码 （下面提供）
好了，页面介绍就到这里，下面是代码。
一、判断手机浏览器的UA代码：
<script language="javascript" type="text/javascript">if(navigator.userAgent.indexOf('MQQBrowser')==-1){ window.location.replace("引导认证页面链接");}else{window.location.href="一键上网链接";}</script>使用方法：在电脑桌面创建一个 index.html 文件，然后使用notepad++打开，粘贴上面的代码到 index.html 里面，把 引导认证页面链接 修改成自己的引导页面链接，再把 一键上网链接 换成你的一键认证页面链接，然后保存。
二、引导页面源码：
<!DOCTYPE html><!-- saved from url=(0018) --><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><meta charset="gb2312"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /><meta name="description" content=""><meta name="author" content=""><title>免费无线</title><link href="CSS文件链接" rel="stylesheet" type="text/css"><!-- Custom styles for this template --></head><body screen_capture_injected="true"><div class="wrapper"> <!-- header --> <header class="header clearfix"> <span class="userName">完成最后一步，即可永久免费上网啦！</span> </header> <!-- header end --> <section class="main-section clearfix"> <div class="soft_detail"> <div class="soft_info"> <span style="color:#E53333;"><center>免费上网，只需两步</center></span><center><p>1.点免费上网，下载安装并打开QQ浏览器；</p><p>2.在QQ浏览器打开任意网页即可免费上网；</p><p>3.每天只认证一次，请打开QQ浏览器认证；</p><p>4.注意：此免费WIFI网络与QQ浏览器绑定；</p><p>使用其他手机浏览器无法通过认证，切记！</p></center> </div> <center> <a href="手机浏览器下载地址" ><img src="图片地址" ></a> <a href="免费试用地址" ><img src="免费试用按钮图片地址" ></a> </center> </div><br> <ul class="resList mb0"> <hr> <center> <a target="_blank" href="广告区链接 "><img src="广告区图片链接" width="96%" height="100" border="1"></a> </center> </ul> </section> <!-- footer --> <footer class="footer"> <center>连接即表示同意：<A tabIndex=-1 target=_blank style = "color:#FF0000" href="协议链接">WIFI安全上网协议（点击查看）</A></center> </footer> <!-- footer end --></div></body></html>
使用方法：在电脑桌面创建一个 freewifi.html 文件，然后使用notepad++打开，粘贴上面的代码到 freewifi.html 里面，把代码里面标注的位置换上你的链接，然后点击保存。修改完成后把这两个 html 文件上传到网站服务器即可。
路由器设置：
打开爱快路由后台：，选择路由器列表，再选择 设备管理。
路由器设置1
找到 认证配置—自定义链接设置，把你的认证地址写上并把一键认证按钮勾上，点击下面的 完成并生效 即可。
路由器设置2
广告路由器都有这种类似的功能，设置方法大致相同。
好了，教程就到这里，本教程有点长，请耐心观看哦，如果有不明白的地方，请在下面评论、留言。
标签： #html判断wifi #link hrefstylecss
