微信选择在浏览器中打开设置提示遮罩弹窗

使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等。网上流传的各种微信打开下载链接,微信已更新基本失效,用户可以将应用传到应用宝。

终极解决方法

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

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

weixin-tip

这样子用户就只能在浏览器中打开,并且可以直接下载应用了。欢迎打开微信扫描查看(其他扫描没有效果)。

weixin-tip-js

演示和下载

我已经将代码上传到github上了,你可以直接下载我的图片和js来用。github地址

建议直接看我第三个的代码:微信内置浏览器不支持下载文件应用的解决方法答疑

function weixinTip(ele){
	var ua = navigator.userAgent;
	var isWeixin = !!/MicroMessenger/i.test(ua);
	if(isWeixin){
		ele.onclick=function(e){
			window.event? window.event.returnValue = false : e.preventDefault();
			document.getElementById('JweixinTip').style.display='block';
		}
		document.getElementById('JweixinTip').onclick=function(){
			this.style.display='none';
		}
	}
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下载二
weixinTip(btn2);

下面的内容可以忽略,直接看上面这篇文章里面的代码吧。

 

如果这个代码对你有用,希望你在下载时也点击star一下。

版本一:纯JS

版本二:纯jQuery

版本三:jquery+css+div(虽然操作复杂,但实际上平时常用这种)。

如果你已经将它用在你的项目中了,欢迎留下你的在线地址哦。

号外:由于这个代码一进入就是弹出提示,可能会影响用户其它操作,故而写了另一篇优化的代码,支持用户点击下载链接之后才弹出提示,并且还可以点击关闭。

详情请看:微信扫描打开APP下载链接提示代码优化

原文:微信选择在浏览器中打开设置提示遮罩弹窗 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/weixin-tip.html)

“微信选择在浏览器中打开设置提示遮罩弹窗”有111个评论

  1. 城南以北我最帅

    我违心 18647663223

    登录回复
  2. 城南以北我最帅

    博主 这个 应该怎么用 求指教 可以付费

    登录回复
  3. 手机必备品

    博主,给做一个这样的呗,付费

    登录回复
  4. uianan

    博主你好,请问怎么让手机qq打开网址实现同样的效果?

    我的替换代码是:

    function is_mobileQQ() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/\sQQ/i) == " qq" && /iphone/i.test(ua) == false) {
    return true;
    } else {
    return false;
    }
    }

    可是还是不能实现

    登录回复
  5. 雪莉杨先生_8608

    楼主你好 关于微信打开网址浏览器打开提示 您可以帮我做下吗 我做不好 可以给您支付报酬 感谢了 我微信 new3978

    登录回复
  6. ssdgff

    感谢博主,代码很好。

    登录回复
  7. Sumxelc

    问下,这个项目里弹出的遮罩层怎么实现点击后消失啊??

    登录回复
  8. 肥曼是瘦子

    你好啊,这个代码应该在哪里改写呢?能不能有具体的教程啊?谢谢你~!~!

    登录回复
  9. 用户3684641438

    你好 ,我刚接触这个东西,有个问题想问一下 这个如果一个页面上只能点击安卓实现跳转,拿苹果为什么不能跳转呢?

    登录回复
  10. 袁波00705

    你好,请问一下,另加一个判断手机QQ的UA
    这个代码加在哪里,怎么加,我加了怎么没效果。

    登录回复
    • 前端开发博客

      你好,qq这个是不需要添加的。为了不影响你的使用,我把qq这段代码移到别的地方。

      登录回复
  11. 会跳的雄蟑螂

    你好,请问怎么联系您,想请您帮我们做一个类似的程序

    登录回复
  12. 前端开发博客

    非常好的代码,感谢博主辛苦付出

    登录回复
  13. 小鬼哦111

    http://dwz.cn/2higTE 我想找个浏览器也有遮罩层图片指引浏览器下载 怎么处理啊? 能帮忙弄一下吗 ? 我新手

    登录回复
  14. 章章的小新

    博主,二维码的文本信息是1个apk下载链接,我怎么扫描二维码的时候,判断是微信还是什么浏览器啊?主要是这个中间步骤不知道怎么做,求大神讲解

    登录回复
    • 前端博客

      就是判断是微信标志,然后操作,主要代码:
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger"){}

      登录回复
      • 於飛龍

        博主 请教你一下 我现在使用wex5生成的二维码 然后微信扫一扫 不能正常下载apk 我需要在什么地方去判断是微信标志呢?

        登录回复
  15. happy--萍萍--

    扫面你放的这张二维码后 显示弹出遮罩页面,按照提示点击在浏览器打开后怎样下载apk呢,这快是怎么弄的

    登录回复
  16. wangshuCoding

    感谢分享~~~

    登录回复
  17. 三门峡水利

    请问高手,这个如何使用的呢。我是需要在一个支付宝支付界面添加这个功能

    登录回复
  18. 天涯路清晨

    不错

    登录回复
  19. 今天不写诗

    研究 研究!

    登录回复
  20. 颜单发布

    你好!请问这个如何使用呢?使用方法。

    登录回复
  21. 10_euro

    怎么在这个代码上添加关闭按钮

    登录回复
    • 前端博客

      可以看我文章底部提到的第二篇文章。

      登录回复
      • 10_euro

        那个不太会用,我用的是wordpress建站,很新的新人,很多代码建站基础都不是很懂,自己的一个小的影视作品网站,这篇文章的代码加了有提示,第二篇的不会加,主要是想在微信朋友圈发外部网站链接的时候,别人打开就提示这个在浏览器中打开,因为微信自带的浏览器会对网站重新排版,就是想在这个提示的基础上有个关闭按钮,第二篇的看完后,按钮点击位置啊,那些都不需要,我不知道怎么改和加入到wordpress里面

        登录回复
        • 前端博客
          回复10_euro :

          可以在里面加一个关闭的按钮,并给按钮加个动作。例如:<i class="icon-close" onclick="document.getElementById('weixin-tip').style.display='none'">X</i>

          登录回复
        • 10_euro
          回复前端博客 :

          谢谢,我试试

          登录回复
        • 10_euro
          回复前端博客 :

          站长,我想知道<i class="icon-close" onclick="document.getElementById('weixin-tip').style.display='none'">X</i>是加到这篇文章代码的哪个位置.是head,还是body

          登录回复
        • 前端开发博客
          回复10_euro :

          你用的哪个版本,这个可以加在html代码,也可以加在js里面,但是需要添加一点css代码才会起作用。可以加在版本一的js里面。

          登录回复
        • 10_euro
          回复前端开发博客 :

          加在js里面,应该怎么写

          登录回复
  22. 用户zpw82861ne

    怎么下载的?

    登录回复
  23. 网购PK实体店

    请博主教下我们代码加到什么地方?谢谢了,新手一枚!

    登录回复
  24. 菠菜的另一种形态

    你好,现在我是只有一个链接生效,其他链接不生效,请问怎么处理!http://www.litpsmart.com/downloads/

    登录回复
  25. kami帅

    非常好 学习了
    请问 关于关闭的代码 是否可以提供?
    另外如何只让第一次打开的时候显示弹窗呢?

    登录回复
    • 前端博客

      可以使用cookie记录弹窗的,保留它的cookie值,实现第一次之后就不再显示,具体搜本站关于cookie的文章教程。

      登录回复
  26. leo

    强大,学习了

    登录回复