Using js to determine whether a mobile phone is installed with an app, jsapp

Using js to determine whether a mobile phone is installed with an app, jsapp

Preface

During daily development, you often encounter such a requirement. By detecting mobile phones, if an app is installed locally, you can directly open the app. Otherwise, Apple will jump to the app-store, android has to jump to the corresponding market. The following describes several solutions.

Solution 1

// The a tag in the html code. For example, weixin scheme is called by default to open the local machine. If not, the link is redirected to the corresponding connection. <a href = "weixin: // "rel =" external nofollow "class =" btn-download "> open now </a> // bind the event to btn-download. If the event is within ms, if the protocol is not parsed, the download link var appstore, ua = navigator will be redirected. 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 500 ms. 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, the src of iframe points to the app protocol, such as weixin scheme, and listens to the onerror event, which means that if the Protocol cannot be parsed, The onerror event will be triggered, but I tried it. The Code is as follows. For more information, see.

// The page contains div # iframe-box used to insert the generated iframe, or the 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 that if the src of iframe is successfully parsed to the protocol, it will jump directly, but if it cannot be parsed, it will not trigger the error event. And you can put the above Code into the function, and then use it as the response function of a button.

Solution 3

Ios Mobile phones are written as follows:

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

Put the above Code in the head, according to the name will also know the meaning, app-id is the app-id, the ios Mobile Phone will see the prompt, andriod ratio is acceptable, the results of self-experiment.

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.