JS implementation Click on the Web page to determine whether to install the app and open otherwise jump app Store_javascript tips

There are often scenarios where we develop apps that need to be promoted, like a big banner picture at the top of a page, or a two-dimensional code. But often we just add a download link to the promotion picture (in the App Store). So let's simulate the user's procedure:

1, the user first visit the publicity page

A, click Banner and enter the app download page in the App Store

b, App download page prompts: installation; user clicks Install

C, after the installation, the app download page prompts: Open; user continues to click to open

D, the user's normal use of the app

2, the user's second visit to the publicity page

A, click Banner and enter the app download page in the App Store

b, App download page prompts: Open; user clicks Open Directly

C, the user's normal use of the app

3, the third time the user, the fourth time 、...、 nth Access, operation steps with 2

As you can see, the experience is very bad for users who have installed the app, either by clicking Banner or scanning the two-dimensional code .

Better experience is: Click on banner (or scan two-dimensional code), the program to determine whether the current system has installed the app, if not installed, then automatically jump to the App Store download page, otherwise directly open the app.

In iOS, to add a large banner of the app, in fact, only need to add a <meta> tag within the

<meta name= ' Apple-itunes-app ' content= ' app-id= your App-id ' >

For example, add a Baidu bar native app Big banner, use the following string code:

<meta name= ' Apple-itunes-app ' content= ' app-id=477927812 ' >

And for the click of the link, whether directly open, you can use the following code to achieve. Prerequisite: You need to know your app's corresponding open protocol, such as the Paste app, protocol: com.baidu.tieba://, micro-mail: weixin://, and so on ...

<!--a tag link, set to the corresponding download link, click on the action opened, register--> 
<a href= "https://itunes.apple.com/cn/app/id477927812" in the Click event Id= "Openapp" > Paste client </a> 
<script type= "Text/javascript" > 
document.getElementById (' Openapp ') ). onclick = function (e) { 
//an IFRAME to try to open the app, if it can open, will switch directly to the app, and automatically block the default behavior of a label 
//Otherwise open a tag's href link 
var IFR = document.createelement (' iframe '); 
IFR.SRC = ' com.baidu.tieba://'; 
Ifr.style.display = ' None '; 
Document.body.appendChild (IFR); 
Window.settimeout (function () { 
document.body.removeChild (IFR); 
},3000) 
}; 
</script>

Of course, if you are designing a two-dimensional code, you can use the following code:

<!--a tag link, set to the corresponding download link, click on the action opened, register--> 
<a href= "https://itunes.apple.com/cn/app/id477927812" in the Click event Id= "Openapp" style= "Display:none" > Paste client </a> 
<script type= "Text/javascript" > 
document.getElementById (' Openapp '). onclick = function (e) { 
//attempt to open the app through an IFRAME, and if it turns on, it switches directly to the app, and automatically block a label default behavior 
//Otherwise open a tag's href link 
var IFR = document.createelement (' iframe '); 
IFR.SRC = ' com.baidu.tieba://'; 
Ifr.style.display = ' None '; 
Document.body.appendChild (IFR); 
Window.settimeout (function () { 
document.body.removeChild (IFR); 
},3000) 
}; 
document.getElementById (' Openapp '). Click ();

Which one to use, depends on your actual scene!

When we are browsing the Web, you will see a Web page floating under a hint box "open app" or "Download App", if your mobile phone has already installed this app, then the page will prompt "open app", if not installed, it will be prompted "Download the words of the app" How is this from a technical perspective to achieve it? Here I share this technology, the company last year to the International Animation Festival when the project, the customer mentioned this demand, click on the Web business when the direct opening of the app (if installed) if not installed, directly open the app page

Let me share the source of this piece.

if (Navigator.userAgent.match (/android/i)) {//an IFRAME to open the app, if it can open, will switch directly to the app, and automatically block the default behavior of a label//otherwise open a label of the href link
var isInstalled; The following is the address of the Android app interface call, which modifies var ifrsrc = ' Cartooncomicsshowtwo://platformapi/startapp According to the circumstances?
Type=0&id=${com.id}&phone_num=${com.phone_num} ';
var IFR = document.createelement (' iframe ');
IFR.SRC = IFRSRC;
Ifr.style.display = ' None '; Ifr.onload = function () {//Alert (' is installed. '); isInstalled = true; alert (isInstalled); document.getElementById (' Ope
NApp0 '). Click (); Ifr.onerror = function () {//alert (' May is not installed. '); isInstalled = false; alert (isInstalled);} Document.body.app
Endchild (IFR);
settimeout (function () {document.body.removeChild (IFR);},1000); //ios Judge if (Navigator.userAgent.match (Iphone|ipod|ipad);? /i) if (Navigator.userAgent.match (/(Iphone|ipod|ipad);? /i) {//animation://com.yz.animation var isInstalled//var gz = ' {comname ': ' ${com.short_name} ', ' Comid ': ' ${com.id} ',
"Comphonenum": "${com.phone_num}", "type": "0"} '; var jsoNgz =json.parse (GZ); The following is the address of iOS call, modify var ifrsrc = ' animation://?comname=${com.short_name}&comid=${com.id}&comphonenum=$ according to the situation
{com.phone_num}&type=0 '; var IFR = document.createelement (' iframe ');
IFR.SRC = IFRSRC;
Ifr.style.display = ' None '; Ifr.onload = function () {//Alert (' is installed. '); isInstalled = true; alert (isInstalled); document.getElementById (' Ope
NApp1 '). Click (); Ifr.onerror = function () {//alert (' May is not installed. '); isInstalled = false; alert (isInstalled);} Document.body.app
Endchild (IFR);
settimeout (function () {document.body.removeChild (IFR);},1000); }
}

There are two questions to be noted in the process:

1, interface address must be written right, we can check the schema protocol, through this Protocol calls

2, in the use of Android when the use of micro-letter sweeping sweep or QQ browser scan code function

The problem with using the above protocol is that you have to use APK on the Tencent application market.

The above mentioned is a small set of JS to introduce the realization of click on the Web page to determine whether to install the app and open otherwise jump App Store, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!