微信打开网址添加在浏览器中打开提示遮罩

我就是我 2022-06-13 02:06 516阅读 0赞

使用微信打开网址时，无法在微信内打开常用下载软件，手机APP等。  
解决方案：弹出一个遮罩提示用户在新的浏览器窗口打开。

使用的是纯JS+HTML+CSS结合的方式，但不要一进入微信就弹出提示它在新浏览器中打开，在这个页面里面还可以提交表单查看信息等，只有它点击应用的链接后，才弹出提示它跳转后下载。

<a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="安卓版下载" /></a>
    <div id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信打开"/><span id="close" title="关闭" class="close">×</span></p></div>

#weixin-tip{display:none;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%;position:relative;}
    #weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}

var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
    window.onload = function() {
    	var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS，不需要的可以去掉
    	var btn = document.getElementById('J_weixin');
    	var tip = document.getElementById('weixin-tip');
    	var close = document.getElementById('close');
    	if (is_weixin) {
    		btn.onclick = function(e) {
    			tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏
    			tip.style.display = 'block';
    			return false;
    		}
    		close.onclick = function() {
    			tip.style.display = 'none';
    		}
    	}
    }

效果图：

![20170623151157335][]

源码参考：[http://blog.csdn.net/netuser1937/article/details/73647909][http_blog.csdn.net_netuser1937_article_details_73647909]

[20170623151157335]: /images/20220613/4806c5183cae4befba2ba46d77a6af90.png
[http_blog.csdn.net_netuser1937_article_details_73647909]: http://blog.csdn.net/netuser1937/article/details/73647909

发表评论取消回复

表情：

评论列表（有 0 条评论，516人围观）

还没有评论，来说两句吧...

相关阅读

相关 TS判断是否在微信浏览器打开

TypeScript里面有类型检查，所以换了个写法，不知道有没有坑： / 是否在微信浏览器中打开 / isWe

清疚/ 2023年07月06日 14:40/ 0 赞/ 11 阅读

相关 Chrome 添加【微信 / QQ】内置浏览器（解决 “请在微信客户端打开链接” 提示）

前言有些链接，是需要在微信客户端内才能打开的，那么想在 PC 端的浏览器上打开，怎么办呢？ ![在这里插入图片描述][20200522124853294.png]

今天药忘吃喽~/ 2023年02月11日 07:24/ 0 赞/ 19 阅读

相关 app下载微信扫码打开提示用户用浏览器打开

1：介绍将打包好的apk文件部署到服务器，把下载页面的URL通过草料二维码或根据url代码生成一个二维码，由于微信对apk文件经行了屏蔽，所以需要提示用户微信内无法下

布满荆棘的人生/ 2022年11月26日 01:46/ 0 赞/ 361 阅读

相关使用jquery实现在app中打开h5网址添加在浏览器中打开提示遮罩代码详解

使用jquery实现app中打开html 弹出一个遮罩提示用户在新的浏览器窗口打开代码详解效果图 html代码 js代码

- 日理万妓/ 2022年08月28日 06:47/ 0 赞/ 273 阅读

相关微信打开网址添加在浏览器中打开提示遮罩

使用微信打开网址时，无法在微信内打开常用下载软件，手机APP等。解决方案：弹出一个遮罩提示用户在新的浏览器窗口打开。使用的是纯JS+HTML+CSS结合的方式，

我就是我/ 2022年06月13日 02:06/ 0 赞/ 517 阅读

相关微信内部浏览器打开网页时提示外部浏览器打开升级版

微信中下载app共有两种实现方式，然而安卓手机跟苹果手机还尽然不同。 1、苹果用户打开后要么自动调起App Store下载（前提是你的应用在苹果商店上架了）；要么

刺骨的言语ヽ痛彻心扉/ 2022年01月12日 14:15/ 0 赞/ 479 阅读

相关 web页在微信中访问增加遮罩层右上角弹出在浏览器中打开

https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层右上角弹出在浏览器中打开 1

旧城等待，/ 2022年01月05日 13:31/ 0 赞/ 270 阅读

相关微信内部浏览器打开网页时提示外部浏览器打开遮罩升级版

上半年公司有一个新的APP项目上线，我们在项目首页做个二维码，然后用户用手机扫一扫就能下载了。但是很多用户反映扫一扫之后下载不了，了解之后才知道这些用户都是使用的微信的扫一扫，

客官°小女子只卖身不卖艺/ 2021年12月23日 07:07/ 0 赞/ 701 阅读

相关进入微信后提示用浏览器打开

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

た入场券/ 2021年11月23日 09:56/ 0 赞/ 428 阅读

相关 js判断是否在微信浏览器中打开

js function is_weixn(){ var ua = navigator.userAgent.toLowerCase();

古城微笑少年丶/ 2021年10月01日 07:54/ 0 赞/ 427 阅读