栀子舒
一些做微信营销活动或者需要推广下载apk文件的域名经常会红，也就是域名被封了，微信屏蔽访问了！
如图：
而微信屏蔽的原理主要应该有两条：
-
第一是系统的自动检测
-
第二是微信工作人员的人工检测
至于我们防止屏蔽通常也有两种方法：（通过屏蔽和监测一些腾讯的监测IP等。从而避免系统的查杀。保证链接在微信和QQ中一直可以直接打开。不用担心被封禁从而无法打开的情况！！）
1、弹框提示法，这种事最简单的方法。方式如下图（适用于下载，违规网址打开等）
这个其实就是通过判断是否是微信浏览器而实现的，如果是微信的浏览器就弹出模态框图片提示用户跳去浏览器
下面分享下栀子舒使用的源代码：<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>自助下单业务平台-用心创造快乐</title><link rel="stylesheet" type="text/css" href="http://caibaojian.com/demo/reset.css"><style type="text/css">/*演示用，请勿引入项目中*/*{margin:0; padding: 0;}body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;}.example{padding: 20px;}.example p{margin: 20px 0;}a{display: inline-block; background: #61B3E6; color:#fff; padding: 0 15px; border-radius: 6px; text-align: center;margin: 0 8px; line-height: 25px; font-size: 20px; text-decoration: none;}a.btn-warn{background: #F0AD4E;}a:hover{opacity: 0.8;}/*核心css*/.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%;height: 100%; z-index: 998; display: none;}.wxtip-icon{width: 52px; height: 67px; background: url(http://img.caibaojian.com/uploads/2016/01/weixin-tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;}.wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}</style></head><body><div class="example"><center><img src="https://ww2.sinaimg.cn/large/005BYqpggy1fvqlisnea4g30tu028gml.jpg" alt="网站经营业务" /> <br> <br><img src="https://ws3.sinaimg.cn/large/005BYqpggy1fvwdve1xxag30rs02jjsf.jpg" alt="网站经营业务" /> <br> <br><h2><span style="color: #ff0000;"><strong>欢迎来到泽以自助下单业务平台-用心创造快乐</strong></span></h2><h3><span style="color: #ff0000;"><strong>因微信官方屏蔽，请用手机浏览器访问，谢谢！</strong></span></h3> <br><a href="http://zeyi.823ka.cn" id="YUEZEYI1">点击进入①号下单平台</a><br><br><a href="http://zeyi.vt58.cn" id="YUEZEYI2" class="btn-warn">点击进入②号下单平台</a> <br></center><div class="wxtip" id="JweixinTip"><span class="wxtip-icon"></span><img src="https://ws3.sinaimg.cn/large/005BYqpggy1fvwdefbfc0j30f008yaa7.jpg" alt="微信跳转图片" /><p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p></div></div><script>function weixinTip(ele){var ua = navigator.userAgent;var isWeixin = !!/MicroMessenger/i.test(ua);if(isWeixin){ele.onclick=function(e){window.event? window.event.returnValue = false : e.preventDefault();document.getElementById('JweixinTip').style.display='block';}document.getElementById('JweixinTip').onclick=function(){this.style.display='none';}}}var btn1 = document.getElementById('YUEZEYI1');//1weixinTip(btn1);var btn2 = document.getElementById('YUEZEYI2'); //2weixinTip(btn2);</script></body></html>
判断那种系统而强制手机端打开：
这种方法不仅可以实现微信端打开提示使用手机默认浏览器而且会判断是那种系统而去强制某种系统打开！
下面代码转自大傻逼-原文连接：https://www.cnblogs.com/s-b-b/p/5822819.html
实现思路:
1.在页面加载的时候去判断是否在微信浏览器里面，如果是就弹出模态框图片提示用户跳去浏览器下载
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
// 弹出模态框提示用户
document.getElementById('download-modal').style.visibility = "visible";
}
2.判断是否哪种系统（android,ios）
// 判断系统客户端
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid == true){
// alert('Android!');
window.location = 'android.apk';
}
else {
if(isiOS == true){
// alert('ios！');
window.location = 'https://itunes.apple.com/';
}else{
alert('请在手机端打开');
}
}
最后附上源代码：
<!DOCTYPE html><html><head><title></title><meta name="viewport" content="width=device-width, initial-scale=1"><script type="text/javascript">function down(){// 判断是否微信浏览器var ua = navigator.userAgent.toLowerCase();//获取判断用的对象if (ua.match(/MicroMessenger/i) == "micromessenger") {// 弹出模态框提示用户document.getElementById('download-modal').style.visibility = "visible";}else{// 判断系统客户端var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(isAndroid == true){// alert('Android!');window.location = 'litme.apk';}else {if(isiOS == true){// alert('ios！');window.location = 'https://itunes.apple.com/';}else{alert('请在手机端打开');}}}}function closeModal(){var modal = document.getElementById('download-modal');modal.style.visibility = "hidden";}</script><style type="text/css">.download-modal{visibility: hidden;width: 100%;height: 100%;opacity: 0.5;position: absolute;text-align: center;background-color:rgb(30,30,30);top: 0;left: 0;z-index: 9999;}.download-modal-mess{}#jump-to-browser{width: 90%;}</style></head><body onload="down()"><div id="download-modal" class="download-modal" onclick="closeModal()"><div class="download-modal-mess"><!-- 提示跳转用户的图片 --><img src="./img/live_weixin.png" id="jump-to-browser"></div></div></body></html>
发表评论