用Javascript实现微信中打开网页时遮罩提示在右上角浏览器中打开效果

相信很多人都遇到过这种情况:自己做的网站,在微信中发网址给别人,结果别人打开的时候,微信只显示了一串网址或者无法正常打开。那么导致这种情况的原因是什么呢?主要原因是因为域名没有备案,所以网站上的Javascript脚本被微信屏蔽了,然后网页也被微信强行转码,这个时候网站上的功能往往已经不能正常使用。那么如何来解决这个问题呢?


解决方法有两个:

1、如果条件允许的话,尽快进行域名备案,备案成功后就没有这些问题出现了

2、如果没办法或者不方便备案,那么就要做一个提示信息,提示用户点击微信右上角的【在浏览器中打开】按钮,实现调用用户手机中的浏览器来打开我们的网站


今天我们要讲的就是实现第二种方法,我们先来看看效果

1.png

那么原理是什么呢?实际上非常的简单,我们只需要在网页加载的时候判断一下浏览器的userAgent即可。如果是在安卓版的微信中打开网页的话,userAgent是类似这样的:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9502 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.121 Mobile Safari/537.36 MicroMessenger/6.1.0.78_r1129455.543 NetType/WIFI


其中MicroMessenger就是关键了,如果是微信的话,都会带了这个标识,那么我们只要判断用户的浏览器userAgent有没有包含MicroMessenger即可判断用户是否使用的是微信打开我们的网页。


判断的代码也非常的简单,如下所示

			
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i) == "micromessenger")
	{				
		alert("用户正在使用微信内置浏览器打开网页!")
	}
	else
	{
		alert("用户没有使用微信打开网页!")
	}

当我们判断到用户正在使用微信打开网页的时候,我们就可以显示我们的提示内容了,这里我们使用的是一张图片,将图片显示到最顶层,然后靠近中上角即可。


完整的代码下载:微信遮罩提示实现方法.zip

  1. 本网站所收集的部分资料来源于互联网,本站不对其真实性负责,也不构成任何其他建议。如果您发现有侵犯您权益的内容,请与我们取得联系,我们会及时修改或删除。
  2. 传递知识、传递力量,欢迎各位网友对本站的文章进行转载和分享。
  3. 本站QQ群交流群:904314688  群号:904314688
发表评论
 
评论列表(目前共有 条评论)
暂时还没有评论哦~

文章搜索

商家广告


版权所有:秋风雅居 (www.7var.com) ©2020 All Rights Reserved.

粤ICP备19021598号