视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > JavaScript >

[JS]用户终端浏览器的判断源代码写法示例

时间:2017-09-15 14:56酷播
[JS]用户终端浏览器的判断源代码写法示例

[JS]用户终端浏览器的判断源代码写法示例1

  1. <!DOCTYPE html> 
  2. <html lang="zh-CN"> 
  3.     <head> 
  4.         <meta charset="UTF-8"> 
  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> 
  6.         <title>浏览器测试</title> 
  7.         <script src="Browser.js"></script> 
  8.         <style> 
  9.             a{ 
  10.                 text-decoration: none; 
  11.                 color: #757575; 
  12.             } 
  13.             a:hover{ 
  14.                 text-decoration: underline; 
  15.             } 
  16.             .wrapper{ 
  17.                 width: 100%; 
  18.                 max-width: 960px; 
  19.                 margin: 0 auto; 
  20.             } 
  21.             .container{ 
  22.                 margin-bottom: 20px; 
  23.             } 
  24.             .footer{ 
  25.                 line-height: 40px; 
  26.                 text-align: right; 
  27.             } 
  28.             .footer a{ 
  29.                 margin: 0 5px; 
  30.             } 
  31.             .module table{ 
  32.                 width: 100%; 
  33.                 table-layout: fixed; 
  34.                 border-collapse: collapse; 
  35.                 border-spacing: 0; 
  36.                 text-align: center; 
  37.             } 
  38.             .module thead{ 
  39.                 background: #eee; 
  40.             } 
  41.             .module th,.module td{ 
  42.                 padding: 8px 5px; 
  43.                 line-height: 24px; 
  44.                 border: 1px solid #eee; 
  45.             } 
  46.         </style> 
  47.     </head> 
  48.     <body> 
  49.         <div class="wrapper"> 
  50.             <div class="container"> 
  51.                 <div class="module"> 
  52.                     <script> 
  53.                         var info = new Browser(); 
  54.                         if(info.device!='Mobile'){ 
  55.                             document.writeln('<table>\ 
  56.                                 <caption><p>'+navigator.userAgent+'</p></caption>\ 
  57.                                 <thead>\ 
  58.                                     <tr>\ 
  59.                                         <th>浏览器</th>\ 
  60.                                         <th>版本</th>\ 
  61.                                         <th>内核</th>\ 
  62.                                         <th>操作系统</th>\ 
  63.                                         <th>设备</th>\ 
  64.                                         <th>语言</th>\ 
  65.                                     </tr>\ 
  66.                                 </thead>\ 
  67.                                 <tbody>\ 
  68.                                     <tr>\ 
  69.                                         <td>'+info.browser+'</td>\ 
  70.                                         <td>'+info.version+'</td>\ 
  71.                                         <td>'+info.engine+'</td>\ 
  72.                                         <td>'+info.os+' '+info.osVersion+'</td>\ 
  73.                                         <td>'+info.device+'</td>\ 
  74.                                         <td>'+info.language+'</td>\ 
  75.                                     </tr>\ 
  76.                                 </tbody>\ 
  77.                             </table>'); 
  78.                         }else{ 
  79.                             document.writeln('<table>\ 
  80.                                 <caption><p>'+navigator.userAgent+'</p></caption>\ 
  81.                                 <thead>\ 
  82.                                     <tr>\ 
  83.                                         <th>浏览器</th>\ 
  84.                                         <th>版本</th>\ 
  85.                                         <th>内核</th>\ 
  86.                                     </tr>\ 
  87.                                 </thead>\ 
  88.                                 <tbody>\ 
  89.                                     <tr>\ 
  90.                                         <td>'+info.browser+'</td>\ 
  91.                                         <td>'+info.version+'</td>\ 
  92.                                         <td>'+info.engine+'</td>\ 
  93.                                     </tr>\ 
  94.                                 </tbody>\ 
  95.                             </table>'); 
  96.                             document.writeln('<table>\ 
  97.                                 <thead>\ 
  98.                                     <tr>\ 
  99.                                         <th>操作系统</th>\ 
  100.                                         <th>设备</th>\ 
  101.                                         <th>语言</th>\ 
  102.                                     </tr>\ 
  103.                                 </thead>\ 
  104.                                 <tbody>\ 
  105.                                     <tr>\ 
  106.                                         <td>'+info.os+' '+info.osVersion+'</td>\ 
  107.                                         <td>'+info.device+'</td>\ 
  108.                                         <td>'+info.language+'</td>\ 
  109.                                     </tr>\ 
  110.                                 </tbody>\ 
  111.                             </table>'); 
  112.                         } 
  113.                     </script> 
  114.                 </div> 
  115.             </div> 
  116.             <div class="footer"> 
  117.                 <a href="/">返回首页</a> 
  118.             </div> 
  119.         </div> 
  120.          
  121.     </body> 
  122. </html> 

[JS]用户终端浏览器的判断源代码写法示例2

Browser.js

  1. /** 
  2.  * 浏览器解析，浏览器、Node.js皆可 
  3.  * https://github.com/mumuy/browser 
  4.  */ 
  5.  
  6. (function (root, factory) { 
  7.     if (typeof define === 'function' && define.amd) { 
  8.         // AMD 
  9.         define(factory) 
  10.     } else if (typeof exports === 'object') { 
  11.         // Node, CommonJS-like 
  12.         module.exports = factory() 
  13.     } else { 
  14.         // Browser globals (root is window) 
  15.         root.Browser = factory() 
  16.     } 
  17. }(this, function () { 
  18.     var _window = window||{}; 
  19.     var _navigator = navigator||{}; 
  20.  
  21.     return function (userAgent) { 
  22.         var u = userAgent || _navigator.userAgent; 
  23.         var _this = this; 
  24.  
  25.         var match = { 
  26.             //内核 
  27.             'Trident': u.indexOf('Trident') > -1 || u.indexOf('NET CLR') > -1, 
  28.             'Presto': u.indexOf('Presto') > -1, 
  29.             'WebKit': u.indexOf('AppleWebKit') > -1, 
  30.             'Gecko': u.indexOf('Gecko/') > -1, 
  31.             //浏览器 
  32.             'Safari': u.indexOf('Safari') > -1, 
  33.             'Chrome': u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1, 
  34.             'IE': u.indexOf('MSIE') > -1 || u.indexOf('Trident') > -1, 
  35.             'Edge': u.indexOf('Edge') > -1, 
  36.             'Firefox': u.indexOf('Firefox') > -1 || u.indexOf('FxiOS') > -1, 
  37.             'Firefox Focus': u.indexOf('Focus') > -1, 
  38.             'Chromium': u.indexOf('Chromium') > -1, 
  39.             'Opera': u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1, 
  40.             'Vivaldi': u.indexOf('Vivaldi') > -1, 
  41.             'Yandex': u.indexOf('YaBrowser') > -1, 
  42.             'Kindle': u.indexOf('Kindle') > -1 || u.indexOf('Silk/') > -1, 
  43.             '360': u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1, 
  44.             'UC': u.indexOf('UC') > -1 || u.indexOf(' UBrowser') > -1, 
  45.             'QQBrowser': u.indexOf('QQBrowser') > -1, 
  46.             'QQ': u.indexOf('QQ/') > -1, 
  47.             'Baidu': u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1, 
  48.             'Maxthon': u.indexOf('Maxthon') > -1, 
  49.             'Sogou': u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1, 
  50.             'LBBROWSER': u.indexOf('LBBROWSER') > -1, 
  51.             '2345Explorer': u.indexOf('2345Explorer') > -1, 
  52.             'TheWorld': u.indexOf('TheWorld') > -1, 
  53.             'XiaoMi': u.indexOf('MiuiBrowser') > -1, 
  54.             'Quark': u.indexOf('Quark') > -1, 
  55.             'Qiyu': u.indexOf('Qiyu') > -1, 
  56.             'Wechat': u.indexOf('MicroMessenger') > -1, 
  57.             'Taobao': u.indexOf('AliApp(TB') > -1, 
  58.             'Alipay': u.indexOf('AliApp(AP') > -1, 
  59.             'Weibo': u.indexOf('Weibo') > -1, 
  60.             'Douban': u.indexOf('com.douban.frodo') > -1, 
  61.             'Suning': u.indexOf('SNEBUY-APP') > -1, 
  62.             'iQiYi': u.indexOf('IqiyiApp') > -1, 
  63.             //系统或平台 
  64.             'Windows': u.indexOf('Windows') > -1, 
  65.             'Linux': u.indexOf('Linux') > -1 || u.indexOf('X11') > -1, 
  66.             'Mac OS': u.indexOf('Macintosh') > -1, 
  67.             'Android': u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, 
  68.             'Ubuntu': u.indexOf('Ubuntu') > -1, 
  69.             'FreeBSD': u.indexOf('FreeBSD') > -1, 
  70.             'Debian': u.indexOf('Debian') > -1, 
  71.             'Windows Phone': u.indexOf('IEMobile') > -1 || u.indexOf('Windows Phone')>-1, 
  72.             'BlackBerry': u.indexOf('BlackBerry') > -1 || u.indexOf('RIM') > -1, 
  73.             'MeeGo': u.indexOf('MeeGo') > -1, 
  74.             'Symbian': u.indexOf('Symbian') > -1, 
  75.             'iOS': u.indexOf('like Mac OS X') > -1, 
  76.             'Chrome OS': u.indexOf('CrOS') > -1, 
  77.             'WebOS': u.indexOf('hpwOS') > -1, 
  78.             //设备 
  79.             'Mobile': u.indexOf('Mobi') > -1 || u.indexOf('iPh') > -1 || u.indexOf('480') > -1, 
  80.             'Tablet': u.indexOf('Tablet') > -1 || u.indexOf('Pad') > -1 || u.indexOf('Nexus 7') > -1 
  81.         }; 
  82.         //修正 
  83.         if (match['Mobile']) { 
  84.             match['Mobile'] = !(u.indexOf('iPad') > -1); 
  85.         } else if (_window.showModalDialog && _window.chrome) { 
  86.             match['360'] = true; 
  87.         } 
  88.         //基本信息 
  89.         var hash = { 
  90.             engine: ['WebKit', 'Trident', 'Gecko', 'Presto'], 
  91.             browser: ['Safari', 'Chrome', 'Edge', 'IE', 'Firefox', 'Firefox Focus', 'Chromium', 'Opera', 'Vivaldi', 'Yandex', 'Kindle', '360', 'UC', 'QQBrowser', 'QQ', 'Baidu', 'Maxthon', 'Sogou', 'LBBROWSER', '2345Explorer', 'TheWorld', 'XiaoMi', 'Quark', 'Qiyu', 'Wechat', 'Taobao', 'Alipay', 'Weibo', 'Douban','Suning', 'iQiYi'], 
  92.             os: ['Windows', 'Linux', 'Mac OS', 'Android', 'Ubuntu', 'FreeBSD', 'Debian', 'iOS', 'Windows Phone', 'BlackBerry', 'MeeGo', 'Symbian', 'Chrome OS', 'WebOS'], 
  93.             device: ['Mobile', 'Tablet'] 
  94.         }; 
  95.         _this.device = 'PC'; 
  96.         _this.language = (function () { 
  97.             var g = (_navigator.browserLanguage || _navigator.language); 
  98.             var arr = g.split('-'); 
  99.             if (arr[1]) { 
  100.                 arr[1] = arr[1].toUpperCase(); 
  101.             } 
  102.             return arr.join('_'); 
  103.         })(); 
  104.         for (var s in hash) { 
  105.             for (var i = 0; i < hash[s].length; i++) { 
  106.                 var value = hash[s][i]; 
  107.                 if (match[value]) { 
  108.                     _this[s] = value; 
  109.                 } 
  110.             } 
  111.         } 
  112.         //系统版本信息 
  113.         var osVersion = { 
  114.             'Windows': function () { 
  115.                 var v = u.replace(/^.*Windows NT ([\d.]+);.*$/, '$1'); 
  116.                 var hash = { 
  117.                     '6.4': '10', 
  118.                     '6.3': '8.1', 
  119.                     '6.2': '8', 
  120.                     '6.1': '7', 
  121.                     '6.0': 'Vista', 
  122.                     '5.2': 'XP', 
  123.                     '5.1': 'XP', 
  124.                     '5.0': '2000' 
  125.                 }; 
  126.                 return hash[v] || v; 
  127.             }, 
  128.             'Android': function () { 
  129.                 return u.replace(/^.*Android ([\d.]+);.*$/, '$1'); 
  130.             }, 
  131.             'iOS': function () { 
  132.                 return u.replace(/^.*OS ([\d_]+) like.*$/, '$1').replace(/_/g, '.'); 
  133.             }, 
  134.             'Debian': function () { 
  135.                 return u.replace(/^.*Debian\/([\d.]+).*$/, '$1'); 
  136.             }, 
  137.             'Windows Phone': function () { 
  138.                 return u.replace(/^.*Windows Phone( OS)? ([\d.]+);.*$/, '$2'); 
  139.             }, 
  140.             'Mac OS': function () { 
  141.                 return u.replace(/^.*Mac OS X ([\d_]+).*$/, '$1').replace(/_/g, '.'); 
  142.             }, 
  143.             'WebOS': function () { 
  144.                 return u.replace(/^.*hpwOS\/([\d.]+);.*$/, '$1'); 
  145.             } 
  146.         } 
  147.         _this.osVersion = ''; 
  148.         if (osVersion[_this.os]) { 
  149.             _this.osVersion = osVersion[_this.os](); 
  150.             if (_this.osVersion == u) { 
  151.                 _this.osVersion = ''; 
  152.             } 
  153.         } 
  154.         //浏览器版本信息 
  155.         var version = { 
  156.             'Safari': function () { 
  157.                 return u.replace(/^.*Version\/([\d.]+).*$/, '$1'); 
  158.             }, 
  159.             'Chrome': function () { 
  160.                 return u.replace(/^.*Chrome\/([\d.]+).*$/, '$1').replace(/^.*CriOS\/([\d.]+).*$/, '$1'); 
  161.             }, 
  162.             'IE': function () { 
  163.                 return u.replace(/^.*MSIE ([\d.]+).*$/, '$1').replace(/^.*rv:([\d.]+).*$/, '$1'); 
  164.             }, 
  165.             'Edge': function () { 
  166.                 return u.replace(/^.*Edge\/([\d.]+).*$/, '$1'); 
  167.             }, 
  168.             'Firefox': function () { 
  169.                 return u.replace(/^.*Firefox\/([\d.]+).*$/, '$1').replace(/^.*FxiOS\/([\d.]+).*$/, '$1'); 
  170.             }, 
  171.             'Firefox Focus': function () { 
  172.                 return u.replace(/^.*Focus\/([\d.]+).*$/, '$1'); 
  173.             }, 
  174.             'Chromium': function () { 
  175.                 return u.replace(/^.*Chromium\/([\d.]+).*$/, '$1'); 
  176.             }, 
  177.             'Opera': function () { 
  178.                 return u.replace(/^.*Opera\/([\d.]+).*$/, '$1').replace(/^.*OPR\/([\d.]+).*$/, '$1'); 
  179.             }, 
  180.             'Vivaldi': function () { 
  181.                 return u.replace(/^.*Vivaldi\/([\d.]+).*$/, '$1'); 
  182.             }, 
  183.             'Yandex': function () { 
  184.                 return u.replace(/^.*YaBrowser\/([\d.]+).*$/, '$1'); 
  185.             }, 
  186.             'Kindle': function () { 
  187.                 return u.replace(/^.*Version\/([\d.]+).*$/, '$1'); 
  188.             }, 
  189.             'Maxthon': function () { 
  190.                 return u.replace(/^.*Maxthon\/([\d.]+).*$/, '$1'); 
  191.             }, 
  192.             'QQBrowser': function () { 
  193.                 return u.replace(/^.*QQBrowser\/([\d.]+).*$/, '$1'); 
  194.             }, 
  195.             'QQ': function () { 
  196.                 return u.replace(/^.*QQ\/([\d.]+).*$/, '$1'); 
  197.             }, 
  198.             'Baidu': function () { 
  199.                 return u.replace(/^.*BIDUBrowser[\s\/]([\d.]+).*$/, '$1'); 
  200.             }, 
  201.             'UC': function () { 
  202.                 return u.replace(/^.*UC?Browser\/([\d.]+).*$/, '$1'); 
  203.             }, 
  204.             'Sogou': function () { 
  205.                 return u.replace(/^.*SE ([\d.X]+).*$/, '$1').replace(/^.*SogouMobileBrowser\/([\d.]+).*$/, '$1'); 
  206.             }, 
  207.             '2345Explorer': function () { 
  208.                 return u.replace(/^.*2345Explorer\/([\d.]+).*$/, '$1'); 
  209.             }, 
  210.             'TheWorld': function () { 
  211.                 return u.replace(/^.*TheWorld ([\d.]+).*$/, '$1'); 
  212.             }, 
  213.             'XiaoMi': function () { 
  214.                 return u.replace(/^.*MiuiBrowser\/([\d.]+).*$/, '$1'); 
  215.             }, 
  216.             'Quark': function () { 
  217.                 return u.replace(/^.*Quark\/([\d.]+).*$/, '$1'); 
  218.             }, 
  219.             'Qiyu': function () { 
  220.                 return u.replace(/^.*Qiyu\/([\d.]+).*$/, '$1'); 
  221.             }, 
  222.             'Wechat': function () { 
  223.                 return u.replace(/^.*MicroMessenger\/([\d.]+).*$/, '$1'); 
  224.             }, 
  225.             'Taobao': function () { 
  226.                 return u.replace(/^.*AliApp\(TB\/([\d.]+).*$/, '$1'); 
  227.             }, 
  228.             'Alipay': function () { 
  229.                 return u.replace(/^.*AliApp\(AP\/([\d.]+).*$/, '$1'); 
  230.             }, 
  231.             'Weibo': function () { 
  232.                 return u.replace(/^.*weibo__([\d.]+).*$/, '$1'); 
  233.             }, 
  234.             'Douban': function () { 
  235.                 return u.replace(/^.*com.douban.frodo\/([\d.]+).*$/, '$1'); 
  236.             }, 
  237.             'Suning': function () { 
  238.                 return u.replace(/^.*SNEBUY-APP([\d.]+).*$/, '$1'); 
  239.             }, 
  240.             'iQiYi': function () { 
  241.                 return u.replace(/^.*IqiyiVersion\/([\d.]+).*$/, '$1'); 
  242.             } 
  243.         }; 
  244.         _this.version = ''; 
  245.         if (version[_this.browser]) { 
  246.             _this.version = version[_this.browser](); 
  247.             if (_this.version == u) { 
  248.                 _this.version = ''; 
  249.             } 
  250.         } 
  251.         //修正 
  252.         if (_this.browser == 'Edge') { 
  253.             _this.engine = 'EdgeHTML'; 
  254.         } else if (_this.browser == 'Chrome' && parseInt(_this.version) > 27) { 
  255.             _this.engine = 'Blink'; 
  256.         } else if (_this.browser == 'Opera' && parseInt(_this.version) > 12) { 
  257.             _this.engine = 'Blink'; 
  258.         } else if (_this.browser == 'Yandex') { 
  259.             _this.engine = 'Blink'; 
  260.         } 
  261.     }; 
  262. })); 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器