微信QQ開啟網頁時提示用瀏覽器開啟
阿新 • • 發佈：2018-10-31
微信QQ開啟網頁時提示用瀏覽器開啟
一,需求分析
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 <divclass="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 * { 3margin: 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 實現效果
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>