Various schemes for judging whether a certain app is installed on a mobile phone by using js

Preface

Everyone often encounters such a demand in daily development. By testing the mobile phone, if app is installed locally, turn it on directly, otherwise Apple will jump to app-store, and Android will jump to the corresponding market. Here are some solutions for you.

Solution 1

//html In code   Adj.  a  Tag, taking WeChat as an example, the default is to call weixin scheme To open the WeChat of this machine, and if not, jump to the corresponding connection 
  　　  　　  <a href="weixin://" rel="external nofollow" class="btn-download"> Open immediately </a>
 　　 
  　　  　　  //  For btn-download  Bind events, if the 500ms If you do not resolve to the protocol, you will jump to the download link  
  　　  　　   var appstore, ua = navigator.userAgent;
  if(ua.match(/Android/i)){ 
   appstore = 'market://search?q=com.singtel.travelbuddy.android';
  }
  if(ua.match(/iphone|ipod|ipad/)){
   appstore = "https://itunes.apple.com/cn/app/wei-xin/id414478124?mt=8&ign-mpt=uo%3D4"; 
  }
  function applink(fail){ 
   return function(){ 
    var clickedAt = +new Date; 
    // During tests on 3g/3gs this timeout fires immediately if less than 500ms. 
    setTimeout(function(){ 
      // To avoid failing on return to MobileSafari, ensure freshness! 
      if (+new Date - clickedAt < 2000){ 
       window.location = fail; 
      } 
    }, 500);  
   }; 
  } 
  $('.icon-download, .btn-download')[0].onclick = applink(appstore);

Solution 2

By generating a hidden iframe in the page, src of iframe points to app protocol, such as weixin scheme, and listens for onerror event, which means that if the protocol cannot be resolved, onerror event will be triggered, but I tried it once and failed. The code is as follows, please refer to 1.

//  There are div#iframe-box  Used to insert the generated iframe Or take WeChat as an example 
 　　　　  var ifm = document.createElement('iframe'), isInstalled;
  ifm.style.display = 'none';
  ifm.src = 'wixin://';
  ifm.onload = function(e){
   var e = e || window.event;
   e.preventDefault();
  }
  ifm.onerror = function(){
   //isInstalled = false;
   alert(1);
  }
  document.getElementById('iframe-box').appendChild(ifm);

 　　　　 //  But the problem at this time is, iframe Adj. src If the protocol is successfully resolved, it will jump directly, but if it cannot be resolved, it will not be triggered error Events, this will continue to be studied 
 　　　　 //  You can put the above code into a function and then use it as a response function for a button. 

Solution 3

For ios mobile phones, it will be written as follows

<meta name="apple-itunes-app" content="app-id=414478124" /> 

Put the above code in head, and you will know the meaning according to name. app-id is app-id of WeChat. If you look at it with ios mobile phone, you will see a prompt. andriod is better than andriod, and you will experiment by yourself.

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.