为了账号安全,请及时绑定邮箱和手机立即绑定

最新版微信/QQ的遮罩引导代码实现 点击链接或扫码提示浏览器打开

标签:
移动测试

相信在微信中做推广的朋友一定都遇到这种情况的、当你需要在微信中推广的时候会发现,自己的网页被微信屏蔽了,还有就是说APP的下载链接在微信中点击是无法下载的。必须要手动点击,右上角的三个点,然后选择在浏览器中打开,才可以顺利完成!

虽然说这个对于我们比较了解微信的朋友来说是很简单,很轻松的!但是使用微信的百分之九十都是小白,他们是不知道有这部操作的。

今天要加的是一个终极解决方法:弹出一个遮罩提示用户在新的浏览器窗口打开。·

https://img1.sycdn.imooc.com//5e030cd200012d3702020360.jpg


再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。类似于上图这样子:

测试地址

测试链接:http://www.138tool.cn/wxzz/rwal.html

二维码:

https://img1.sycdn.imooc.com//5acb3c8700013dc501600160.jpg



代码如下


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>APP下载</title>
</head> 
<body>
<style type="text/css">
*{margin:0; padding:0;}
img{max-width: 100%; height: 100%;}
</style>
<div>
<p style="text-align: center">
<a href="http://www.xxxxx.com/down/com.sstx.medic.apk">
<br/><br/><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Android.jpg" width="150" height="150">
<br/><font size="5">点击下载</font>
<br/><font size="2">目前仅支持安卓用户,其他用户敬请期待哦</font>
</a>
</p>
</div>
<script type="text/javascript">
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 = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
function loadHtml(){
var div = document.createElement('div');
div.id = 'weixin-tip';
div.innerHTML = '<p><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="point.png"/></p>'; //遮罩图片
document.body.appendChild(div);
}
function loadStyleText(cssText) {
        var style = document.createElement('style');
        style.rel = 'stylesheet';
        style.type = 'text/css';
        try {
            style.appendChild(document.createTextNode(cssText));
        } catch (e) {
            style.styleSheet.cssText = cssText; //ie9以下
        }
            var head=document.getElementsByTagName("head")[0]; //head标签之间加上style样式
            head.appendChild(style); 
    }
    var cssText = "#weixin-tip{position: fixed; left:0; top:0; background: rgba(0,0,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%;}";
if(isWeixin){
loadHtml();
loadStyleText(cssText);
}
</script>
</body>
</html>


本文出自 http://www.138tool.cn/wxzz/rwgodz.html 转载请说明出处



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消