您的位置: 首页  >  IT文章  >  微信QQ打开网页时提示用浏览器打开 微信QQ打开网页时提示用浏览器打开

微信QQ打开网页时提示用浏览器打开 微信QQ打开网页时提示用浏览器打开

分类: IT文章 • 2022-07-26 11:41:56

一,需求分析

        1.1,使用微信或QQ打开网址时，无法在微信或QQ内打开常用下载软件，手机APP等。故此需要在微信qq里提示

二,功能实现

2.1 html实现

 1  <div id='weixin-tip-box'>
 2         <div class="triangle_border_up">
 3             <span></span>
 4         </div>
 5         <div class="weixin-tip">
 6             <p>
 7                 请点击右上角
 8             </p>
 9             <p class="content">
10                 选择"浏览器中打开"
11             </p>
12         </div>
13     </div>

2.2 css实现

 1 <style type="text/css">
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6 
 7         #weixin-tip-box {
 8             display: none;
 9             position: fixed;
10             right: 0;
11             top: 4px;
12             align-items: center;
13         }
14         .weixin-tip {
15             background: #40b2a8;
16             z-index: 100;
17             padding: 8px;
18             border-radius: 8px;
19             margin-right: 8px
20         }
21 
22         .weixin-tip p {
23             text-align: center;
24             font-size: 14px;
25             color: #fff
26         }
27 
28         .weixin-tip p.content {
29             text-align: center;
30             font-size: 14px
31         }
32 
33         .triangle_border_up {
34             width: 0;
35             height: 0;
36             border-width: 0 6px 12px;
37             border-style: solid;
38             border-color: transparent transparent #40b2a8;
39             /*透明 透明  灰*/
40             margin-left: 114px
41         }
42     </style>

2.3 javascript实现

 1     <script type="text/javascript">
 2         var is_weixin = (function () {
 3             var ua = navigator.userAgent.toLowerCase();
 4             if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页
 5                 return true;
 6             } else if (ua.match(/QQ/i) == "qq") {//qq里打开网页
 7                 return true;
 8             } else {
 9                 return false;
10             }
11         })();
12         window.onload = function () {
13             //var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
14             var tip = document.getElementById('weixin-tip-box');
15             if (is_weixin) {
16                 tip.style.display = 'block';
17                 return false;
18             }
19         }
20     </script>

2.4 实现效果

微信QQ打开网页时提示用浏览器打开 微信QQ打开网页时提示用浏览器打开

 1 <!DOCTYPE html>
 2 <html lang="zh_CN">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="description" content="">
 8     <meta name="keywords" content="">
 9     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
10     <meta name="renderer" content="webkit">
11     <style type="text/css">
12         * {
13             margin: 0;
14             padding: 0;
15         }
16 
17         #weixin-tip-box {
18             display: none;
19             position: fixed;
20             right: 0;
21             top: 4px;
22             align-items: center;
23         }
24         .weixin-tip {
25             background: #40b2a8;
26             z-index: 100;
27             padding: 8px;
28             border-radius: 8px;
29             margin-right: 8px
30         }
31 
32         .weixin-tip p {
33             text-align: center;
34             font-size: 14px;
35             color: #fff
36         }
37 
38         .weixin-tip p.content {
39             text-align: center;
40             font-size: 14px
41         }
42 
43         .triangle_border_up {
44             width: 0;
45             height: 0;
46             border-width: 0 6px 12px;
47             border-style: solid;
48             border-color: transparent transparent #40b2a8;
49             /*透明 透明  灰*/
50             margin-left: 114px
51         }
52     </style>
53     <title>app下载</title>
54 </head>
55 
56 <body class="success">
57     <div id='weixin-tip-box'>
58         <div class="triangle_border_up">
59             <span></span>
60         </div>
61         <div class="weixin-tip">
62             <p>
63                 请点击右上角
64             </p>
65             <p class="content">
66                 选择"浏览器中打开"
67             </p>
68         </div>
69     </div>
70 
71     <script type="text/javascript">
72         var is_weixin = (function () {
73             var ua = navigator.userAgent.toLowerCase();
74             if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页
75                 return true;
76             } else if (ua.match(/QQ/i) == "qq") {//qq里打开网页
77                 return true;
78             } else {
79                 return true;
80             }
81         })();
82         window.onload = function () {
83             //var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
84             var tip = document.getElementById('weixin-tip-box');
85             if (is_weixin) {
86                 tip.style.display = 'block';
87                 return false;
88             }
89         }
90     </script>
91 </body>
92 
93 </html>

 js判断移动端使用的系统平台

1 var u = navigator.userAgent;
2     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
3         //安卓手机
4     } else if (u.indexOf('iPhone') > -1) {
5         //苹果手机
6     } else if (u.indexOf('Windows Phone') > -1) {
7         //winphone手机
8     }

js判断访问网站的设备是否是PC

 1 //平台、设备和操作系统
 2 var system ={
 3 win : false,
 4 mac : false,
 5 xll : false
 6 };
 7 //检测平台
 8 var p = navigator.platform;
 9 system.win = p.indexOf("Win") == 0;
10 system.mac = p.indexOf("Mac") == 0;
11 system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
12 //跳转语句
13 if(system.win||system.mac||system.xll){
14 alert("PC访问");
15 }else{
16 alert("非PC访问");
17 }

相关推荐