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

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

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

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

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

测试地址

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

二维码:

代码如下

APP下载

*{margin:0; padding:0;}

img{max-width: 100%; height: 100%;}


点击下载

目前仅支持安卓用户,其他用户敬请期待哦

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 = '

'; //遮罩图片

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);

}

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容