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

相信在微信中做推广的朋友一定都遇到这种情况的、当你需要在微信中推广的时候会发现,自己的网页被微信屏蔽了,还有就是说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 style="text-align: center"><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>

原文地址:https://www.cnblogs.com/sddc1a/p/12096925.html

时间: 2024-10-10 09:34:07

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

黄聪:如何用代码设置控制自己网站的网页在360浏览器打开时强制优先使用极速模式,而非兼容模式

最近用360浏览器访问自己的网站,发现都是被优先选用兼容模式打开,这使得网站很难看.为了让360浏览器打开网站的时候优先试用极速模式,找了一下官方论坛,发现了解决方案. 在head标签中添加一行代码: <html> <head> <meta name="renderer" content="webkit|ie-comp|ie-stand"> </head> <body> </body> <

用herl工具解决微信内链接可直接用外部浏览器打开

很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可. 下面给大家推荐FishJump工具(http://www.fishtool.cn/) 使用步骤 1. 用浏览器打开我们的工具地址 2. 将你的推广链接输入工具框,点击生成 3. 复制新生成的跳转链接和二维码 4. 微信内打开跳转链接或扫码识别二维码 功能效果功能实现后, 苹果用户即可在微信内直接下载app也可以跳转浏览器下载,安卓用户则自动打开手机浏览器下载app

Python必备基础:这些NumPy的神操作你都掌握了吗?微交易支付通道申请微信支付接口对接支付宝支付通道搭建微盘网银扫码快捷H5支付

导读:NumPy是Python的基础,更是数据科学的通用语言. 本文简单介绍NumPy模块的两个基本对象ndarray.ufunc,介绍ndarray对象的几种生成方法及如何存取其元素.如何操作矩阵或多维数组.如何进行数据合并与展平等.最后说明通用函数及广播机制. 需要了解 JR金融项目 区块链,比特币,p2p项目,B2B网关,现货资金盘,期货招商,股票配资,商品交易所 大盘的 金融支付 第三方支付,网关支付,网银支付,银行卡支付,话费卡支付,银联代扣,支付渠道,支付宝支付,微信支付,扫码支付,

如何设置微信点击链接或扫一扫二维码跳转外部浏览器打开网页下载

本文章向大家介绍微信自动跳转浏览器打开APP(APK)下载链接,主要包括微信自动跳转浏览器打开APP(APK)下载链接使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 操作步骤 月牙跳转是一款基于微信后端开发了一款微信营销下载推广助手,使用了本插件生成的链接,用户在微信任意环境下点击链接或者扫描二维码,可以实现直接跳转手机默认浏览器并打开指定网页. 1.打开 月牙跳转 网址:http://www.aizhuanlove.cn/ 2.准备好我们的推广链

微信提示浏览器打开代码——遮罩层提示代码实现!

微信中打开链接时,弹出遮罩提示用户,请点击右上角在浏览器中打开如何实现?,本期手把手教会. 现在免费分享出来,最终实现效果如下: 以下是代码部分: 第一步:判断微信的UA. var ua = navigator.userAgent; var isWeixin = !!/MicroMessenger/i.test(ua); 第二步:引入默认隐藏层. <a href="http://caibaojian.com/test.apk" id="JdownApp">

微信打开网址提示浏览器打开的通用遮罩

今天要加的是一个遮罩提示的解决方法:弹出一个遮罩提示用户在新的浏览器窗口打开. 再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用户在浏览器中打开下载.并且不加关闭的按钮.类似于下面这样子: 这样子用户就只能在浏览器中打开,并且可以直接下载应用了.欢迎打开微信扫描查看(其他扫描没有效果). 演示和下载 有需要的朋友可以前往 138TOOL 原文地址:https://blog.51cto.com/14357403/2400145

如何用代码设置控制自己网站的网页在360浏览器打开时强制优先使用极速模式,而非兼容模式

在head标签中添加一行代码: <html> <head> <meta name="renderer" content="webkit|ie-comp|ie-stand" /> </head> <body> </body> </html> content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核. 若

用代码设置控制自己网站的网页在360浏览器打开时强制优先使用极速模式,而非兼容模式

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核. 默认用极速核:<meta name="renderer" content="webkit"> 默认用ie兼容内核:<meta name="renderer" content="ie-comp"> 默认用ie标准内核:<meta name="ren

spring_boot_pay支付宝,微信,银联支付详细代码案例

spring-boot-pay 支付服务:支付宝,微信,银联详细代码案例(除银联支付可以测试以外,支付宝和微信支付测试均需要企业认证,个人无法完成测试),项目启动前请仔细阅读 注意事项  . 友情提示 由于工作原因,项目正在完善中(仅供参考),随时更新日志,有疑问请留言或者加群 演示界面 欢迎关注 支付宝 电脑支付:https://docs.open.alipay.com/270 扫码支付:https://docs.open.alipay.com/194 手机支付:https://docs.op