如图,点击下载时提示在浏览器中打开
两个按钮
代码部分
js部分
<script>
function weixinTip(ele){
var ua = navigator.userAgent;//navigator浏览器对象, userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。发送一个能够代表客户端类型的字符串,比如浏览器类型 操作系统等信息。User-Agent 的约定格式是:应用名,跟一个斜线,跟版本号,剩下的是自由的格式。
var isWeixin = !!/MicroMessenger/i.test(ua);
if(isWeixin){
//按钮点击时绑定函数
ele.onclick=function(e){
window.event? window.event.returnValue = false : e.preventDefault();//event.preventDefault() 取消事件的默认动作
document.getElementById('JweixinTip').style.display='block';
}
document.getElementById('JweixinTip').onclick=function(){
this.style.display='none';//显示对象obj.style.display = "block";隐藏对象 obj.style.display = "none"
}
}
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下载二
weixinTip(btn2);
</script>
html部分
<div>
<a class=" id="JdownApp" href="下载地址"></a>
<a class=" id="JdownApp2" href="下载地址"></a>
</div>
</div>
</div>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>
```
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(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}
.wxtip-txt {margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}