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

407245View | 111

使用微信打开网址时，无法在微信内打开常用下载软件，手机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

    赞(9)
    登录回复
  2. 城南以北我最帅

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

    赞(14)
    登录回复
  3. 手机必备品

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

    赞(74)
    登录回复
  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;
    }
    }

    可是还是不能实现

    赞(90)
    登录回复
  5. 雪莉杨先生_8608

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

    赞(79)
    登录回复
  6. ssdgff

    感谢博主，代码很好。

    赞(70)
    登录回复
  7. Sumxelc

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

    赞(57)
    登录回复
  8. 肥曼是瘦子

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

    赞(78)
    登录回复
  9. 用户3684641438

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

    赞(64)
    登录回复
  10. 袁波00705

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

    赞(59)
    登录回复
    • 前端开发博客

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

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

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

    赞(45)
    登录回复
  12. 前端开发博客

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

    赞(50)
    登录回复
  13. 小鬼哦111

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

    赞(39)
    登录回复
  14. 章章的小新

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

    赞(53)
    登录回复
    • 前端博客

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

      登录回复
      • 於飛龍

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

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

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

    赞(49)
    登录回复
  16. wangshuCoding

    感谢分享~~~

    赞(26)
    登录回复
  17. 三门峡水利

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

    赞(29)
    登录回复
  18. 天涯路清晨

    不错

    赞(42)
    登录回复
  19. 今天不写诗

    研究 研究！

    赞(23)
    登录回复
  20. 颜单发布

    你好！请问这个如何使用呢？使用方法。

    赞(37)
    登录回复
  21. 10_euro

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

    赞(38)
    登录回复
    • 前端博客

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

      登录回复
      • 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

    怎么下载的？

    赞(47)
    登录回复
  23. 网购PK实体店

    请博主教下我们代码加到什么地方？谢谢了，新手一枚！

    赞(34)
    登录回复
  24. 菠菜的另一种形态

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

    赞(28)
    登录回复
  25. kami帅

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

    赞(35)
    登录回复
    • 前端博客

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

      登录回复
  26. leo

    强大，学习了

    赞(50)
    登录回复