目录

• 目标
• 实现过程
• • 1.添加蒙层div
  • 2.如何判断是否是微信浏览器内
  • 3.针对按钮添加onclick事件
  • 4.针对指定按钮，在html底部添加javascript代码块
• 总结

目标

因为微信内置浏览器的拦截，对于一些文件下载或者跳转有拦截，导致不能直接像手机浏览器那样下载文件或者apk等。这时候需要提示用户用浏览器打开网页，从而来避免用户点击后页面没反应的情况。效果如下

实现过程

1.添加蒙层div

Html

<div class="wxtip" id="JweixinTip">
	<img src="./images/wxtip.png" />
</div>

Css

.wxtip {
	background: rgba(0,0,0,0.8); 
	text-align: right; 
	position: fixed; 
	left:0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
	z-index: 998; 
	display: none;
}

图片示例

2.如何判断是否是微信浏览器内

在微信浏览器内才添加蒙层判断

var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);

3.针对按钮添加onclick事件

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';
		}
	}
}

4.针对指定按钮，在html底部添加javascript代码块

<script>
	var btnAndroid = document.getElementById('btnAndroid');//Android下载
	weixinTip(btnAndroid);
	var btnIOS = document.getElementById('btnIOS'); //IOS下载
	weixinTip(btnIOS);
</script/>

总结

至此功能实现完毕。
原理就是判断如果是微信浏览器，就设置<a>标签按钮的onclick事件，变成点击后显示蒙层div。