前言
对于非.com .cn域名,微信的内置浏览器经常会弹出提示,有时即便是绑定了业务域名网页也会因为调用其他css js而被转码,严重影响了访问体验,大多数站长多采用了更换域名-反代-跳转三件套,然而随之跳转方案的一步步被封禁,找到合适的解决方案势在必行。
笔者受到了处理微信下载程序的启发,决定采用用浏览器打开的方式绕过微信内置浏览器的转码。其具体的实施方式如下:
解决方案
1.请求固定后端页面,利用伪链接传递参数值
2.页面内识别是否为微信内置浏览器
2.1若为微信内置浏览器,弹出使用浏览器打开遮罩,提示用户用浏览器打开
3.若非微信内置浏览器,提取uri中的参数值,解析真实地址并实现跳转
捷径
根据上面的步骤,请求页面完成的操作实际上只有两个
1.识别是否为微信内置浏览器
2.根据传递的值解析真实地址并跳转
其中第一点可以使用纯JS实现
第二点的实现方式有两种
本文先着重阐述懒人法:
进阶法请查看此篇blog(待填坑)
内置浏览器的判定及用浏览器打开遮罩(HTML+CSS+JS法)
思路:通过navigator.userAgent.toLowerCase()得到浏览器类别,若为微信内置浏览器,弹出遮罩
JS代码(写在窗口初始化下):
function is_weixin() { //函数,用于判断是否为微信内置浏览器
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
var isWeixin = is_weixin(); //变量,存储为微信的值
var winHeight = $(window).height(); //变量,存储页面
if (isWeixin) {
$(".weixin-tip").css("height", winHeight);
$(".weixin-tip").show();
}
HTML&CSS代码(遮罩):
HTML部分
<div class="weixin-tip" style="display: none;">
<img src="tip.png" alt="微信打开">
</div>
CSS部分(透明度很皮地调成了66,觉得浅的请自行调整)
.weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}
.weixin-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.66); filter:alpha(opacity=66); height: 100%; width: 100%; z-index: 100;}
懒人法伪装URI并实现跳转
原本的JS跳转想法是直接从请求URI中提取想要访问的目的URL,奈何微信有时不一定能正确区分此类URI造成只打开一部分的尴尬情况,因此想到借助短链服务来实现URI的伪装。
具体方式:
1.得到长连接的短链
2.用短链的最后部分修饰URI
3.JS split分割URI得到特定部分
4.还原成短链网站的URL并跳转
给出示例代码(以新浪的t.cn为例)
var url = window.document.location.href.toString(); //变量,得到请求URL
if (url.indexOf("?") != -1) { //判断是否有?若有则从?处切割(?后即为短链的随机值)
url = url.replace(/=/, ""); //将多余的等号去除
url = url.replace(/.jpg(.*)/, ""); //将用于掩人耳目的jpg
var u = url.split("?"); //按?切割成数组
url = "http://t.cn/" + u[1]; //找到第二段(?后的值,即短链随机值)给t.cn
} else { //没有?的情况(直接传短链随机值)
url = url.replace(/=/, "");
url = url.replace(/.css(.*)/, "");
var u = url.split("/"); //按照/切割成数组
url = "http://t.cn/" + u[u.length - 1]; //数组的最后一个元素(最后一个/后的值,即短链随机值)
}