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

overme4个月前 (10-17)网页设计335

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

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

  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代码判断网页是不是在微信内置浏览器打开的实现方法。

相关文章


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

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

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


		怎么设置微信语音通话来电铃声

怎么设置微信语音通话来电铃声

你是不是也好奇最近跟某些朋友微信语音通话时,拨通后对方有来电铃声。你想不想也设置一个别具一格的微信来电铃声呢。怎么设置微信语音通话来电铃声?以下是小编整理的来电铃声设置方法。 1、点击维修设置按钮...


		微信聊天记录转发分享操作方法

微信聊天记录转发分享操作方法

如文章描述所诉,工作学习交流中,有时候微信聊天记录里面的文字内容,可能其他的朋友或同事也需要?那么怎么办呢,重新输入一遍然后发送,显然是不科学的。那么,可以使用微信的聊天记录转发功能。 微信聊天记...

发表评论

访客

看不清,换一张

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