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

最新推荐文章于 2024-04-27 11:02:12 发布

肖宁远

最新推荐文章于 2024-04-27 11:02:12 发布

阅读量303

点赞数 6

文章标签：微信

本文链接：https://blog.csdn.net/weixin_36845733/article/details/136218053

版权

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

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

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

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

测试地址

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

二维码：

代码如下


  

<!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 >  
<a href="http://www.xxxxx.com/down/com.sstx.medic.apk">  
<br/><br/><img src="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 src="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转载请说明出处

作者：算是一个小老头

原文地址：https://segmentfault.com/a/1190000021396744

肖宁远

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
最新版微信/QQ的遮罩引导代码实现点击链接或扫码提示浏览器打开

相信在微信中做推广的朋友一定都遇到这种情况的、当你需要在微信中推广的时候会发现，自己的网页被微信屏蔽了，还有就是说APP的下载链接在微信中点击是无法下载的。必须要手动点击，右上角的三个点，然后选择在浏览器中打开，才可以顺利完成！虽然说这个对于我们比较了解微信的朋友来说是很简单，很轻松的！但是使用微信的百分之九十都是小白，他们是不知道有这部操作的。今天要加的是一个终极解决方法：弹出一个...
复制链接

扫一扫