How does js determine which browser the current page is open in

  • 2020-11-18 06:06:40
  • OfStack

Recently, I have been working on many HTML5 projects, and many pages are Shared by SNS via WeChat weibo. Download the company's APP on the share page. But in many apps, clicking on the download link does not allow you to download the app. For these browsers, we need to prompt the user to open the sharing page from safari or the browser provided by the system. js can tell which browser the current page is opened in.

The following is a sample piece of code, with comments showing how JS determines whether it is open in WeChat browser, QQ space browser, or sina weibo. Of course, we can do more to improve the 1 point, plus determine whether it is opened on mobile device or PC side browser, this point can refer to this article, more detailed 1 point, you can determine whether it is opened on Android system browser or IOS system browser.


if (browser.versions.mobile) {// Determine if a mobile device is on. browser The code is below 
    var ua = navigator.userAgent.toLowerCase();// Gets the object used for the judgment 
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // Open it in WeChat 
    }
    if (ua.match(/WeiBo/i) == "weibo") {
        // Open on sina Weibo account 
    }
    if (ua.match(/QQ/i) == "qq") {
        // in QQ Open the space 
    }
    if (browser.versions.ios) {
        // Whether in IOS Browser opens 
    } 
    if(browser.versions.android){
        // Whether to open it in android browser 
    }
} else {
    // Otherwise it is PC Browser opens 
}

With the browser code attached, you can determine many browsers by the following methods. This includes IE, Opera, apple, Google, firefox, etc.


var browser = {
  versions: function () {
    var u = navigator.userAgent, app = navigator.appVersion;
    return {     // Mobile terminal browser version information 
      trident: u.indexOf('Trident') > -1, //IE The kernel 
      presto: u.indexOf('Presto') > -1, //opera The kernel 
      webKit: u.indexOf('AppleWebKit') > -1, // Apple, Google kernel 
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // Firefox kernel 
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), // Is it a mobile terminal 
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios terminal 
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android A terminal or uc The browser 
      iPhone: u.indexOf('iPhone') > -1, // Whether it is iPhone or QQHD The browser 
      iPad: u.indexOf('iPad') > -1, // Whether or not iPad
      webApp: u.indexOf('Safari') == -1 // Whether or not web Should program, no head with bottom 
    };
  }(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

Another method:

JS to determine, after looking up data finally achieved the effect, directly on the code


function is_weixn(){ 
  var ua = navigator.userAgent.toLowerCase(); 
  if(ua.match(/MicroMessenger/i)=="micromessenger") { 
    return true; 
  } else { 
    return false; 
  } 
} 

The test was completely correct, whether it was android or iphone or ipad. Of course, it was easier to judge in other languages other than js, such as PHP


function is_weixin(){ 
  if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) { 
      return true; 
  }  
  return false; 
} 

That's how js determines which browser the current page is open in, and hopefully it will help you with your studies.


Related articles: