如何判断网页是在微信浏览器中

overme2个月前 (10-17)网页设计217

你可能也遇到过,朋友通过微信发给你的连接,有些操作不能直接进行,会引导你去浏览器打开。那么这个功能时如何实现的呢,首先网页要判断是不是在微信浏览器中被打开,如果是再引导用户新打开浏览器访问。

那么是如何判断微信浏览器的呢,可以参考下方代码判断:

  1. <html lang=”en”>
  2. <head>
  3. <meta charset=”utf-8″/>
  4. <title>判断网页是否在微信内置浏览器中打开</title>
  5. <style>
  6. .wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 1998; display: none;}
  7. .wxtip-icon{width: 52px; height: 67px; background: #111; display: block; position: absolute; right: 20px; top: 20px;}
  8. .wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class=”wxtip” id=”JweixinTip”>
  13.   <span class=”wxtip-icon”></span>
  14.   <p class=”wxtip-txt”>点击右上角<br/>选择在浏览器中打开</p>
  15. </div>
  16. </body>
  17. </html>
  18. <script type=”text/javascript”>
  19. /* 智能机浏览器版本信息: */
  20. var browser = {
  21.         versions: function() {
  22.                 var u = navigator.userAgent, app = navigator.appVersion;
  23.                 return {//移动终端浏览器版本信息
  24.                         trident: u.indexOf(‘Trident’) > -1, //IE内核
  25.                         presto: u.indexOf(‘Presto’) > -1, //opera内核
  26.                         webKit: u.indexOf(‘AppleWebKit’) > -1, //苹果、谷歌内核
  27.                         gecko: u.indexOf(‘Gecko’) > -1 && u.indexOf(‘KHTML’) == -1, //火狐内核
  28.                         ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  29.                         android: u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1, //android终端或者uc浏览器
  30.                         iPhone: u.indexOf(‘iPhone’) > -1 || u.indexOf(‘Mac’) > -1, //是否为iPhone或者QQHD浏览器
  31.                         iPad: u.indexOf(‘iPad’) > -1, //是否iPad
  32.                         webApp: u.indexOf(‘Safari’) == -1, //是否web应该程序,没有头部与底部
  33.                         wechar:u.indexOf(‘MicroMessenger’) > -1
  34.                 };
  35.         }(),
  36.         language: (navigator.browserLanguage || navigator.language).toLowerCase()
  37. }
  38. /* 判断的方法 */         
  39. if(browser.versions.wechar){
  40.         document.getElementById(‘JweixinTip’).style.display=’block’;
  41.         }            
  42. if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
  43.         document.getElementById(‘JweixinTip’).style.display=’block’;
  44.     }
  45. else if (browser.versions.android) {
  46.         document.getElementById(‘JweixinTip’).style.display=’none’;
  47.     }
  48. </script>

复制代码

以上,就是通过js代码判断网页是不是在微信内置浏览器打开的实现方法。

相关文章


		微信屏蔽朋友圈动态的设置方法

微信屏蔽朋友圈动态的设置方法

之前QQ空间中,就是很多人宣传商品,后面就不怎么用了。 现在使用微信,朋友圈中也常常看到各种商品推广广告,在此分享屏蔽方法 微信朋友圈动态屏蔽设置 1、朋友圈中点击发送广告的人物头像,进入后点击“...


		开启小米手机微信视频通话美颜功能

开启小米手机微信视频通话美颜功能

现在大家日常交流沟通中,使用微信视频聊天的情况很多了。小米12手机拥有强大的拍摄和美颜功能。如果想开启微信视频通话美颜功能,请继续看下去,小编将给大家介绍小米手机美颜设置教程。 1、首先打开小米手...


		开启和关闭微信视频聊天模糊背景功能

开启和关闭微信视频聊天模糊背景功能

近期微信更新了安卓版本系统,新增了视频聊天模糊背景功能。可能有些用户还没有使用习惯,所以想知道这个模糊背景是如何开启和关闭的。 下面小编就来简单介绍一下模糊背景的开启和关闭方法。 1、既然是视频...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。