admin管理员组

文章数量:1530938

目录

  • 目标
  • 实现过程
    • 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。

本文标签： 弹出按钮提示打开浏览器微信内

版权声明：本文标题：微信内App下载时，点击按钮，弹出打开浏览器蒙层提示 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726115112a1056010.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。