下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家,也给大家做个参考。
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描@R_301_479@下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载。网上流传的各种微信打开下载链接,微信已更新基本失效。今天要加的是一个终极解决方法:弹出一个遮罩提示用户在新的浏览器窗口打开。再也不用管微信如何的更新,直接判断微信的 ua,然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。类似于下面这样子:
这样子用户就只能在浏览器中打开,并且可以直接下载应用了,欢迎打开微信扫描查看(其他扫描没有效果)。
实现原理
其实原来很简单,就是判断当前是在微信内置浏览器中,然后将默认隐藏的提示层显示出来。
第一步:
引入默认隐藏层
<a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="安卓版下载" /></a>
<div id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信打开"/><span id="close" title="关闭" class="close">×</span></p></div>
第二步:
添加 CSS 样式
#weixin-tip{display:none;position:fixed;left:0;top:0;background:rgba(0,0.8);filter:alpha(opacity=80);width:100%;height:100%;z-index:100;}
#weixin-tip p{text-align:center;margin-top:10%;padding:0 5%;position:relative;}
#weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}
第四步:
var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
window.onload = function() {
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉
var btn = document.getElementById('J_weixin');
var tip = document.getElementById('weixin-tip');
var close = document.getElementById('close');
if (is_weixin) {
btn.onclick = function(e) {
tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏
tip.style.display = 'block';
return false;
}
close.onclick = function() {
tip.style.display = 'none';
}
}
}
以上代码,你再也不用担心有多个按钮了。我已经将代码上传到 github 上了,你可以直接下载我的图片和 js 来用。如果这个代码对你有用,希望你在下载时也点击 star 一下。
纯 Javascript 版本
jQuery+HTML 版本
jquery+HTML 版本
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。