"JS" click on the page to determine whether to install the app and open, otherwise jump download method

Source: Internet
Author: User

Application Scenarios

App products in the operation of the promotion of a demand, is to allow users to visit our promotion page, we can determine whether the user's mobile phone installed on our app, if installed can be opened directly on the page, or guide users to download. Thus forming a generalization of the closed loop.

Solutions

And for the click Link, can open directly, the following code to achieve. Prerequisites: You need to know your app to open the Protocol, such as the Paste app, the agreement is: com.baidu.tieba://, the: weixin://, etc.

1 <!--a tag click on an open action to register in the click event -2 <ahref= "javascript:;"ID= "Openapp">Paste Client</a>3 <Scripttype= "Text/javascript">4 document.getElementById ('Openapp'). onclick= function(e) {5         //an IFRAME to try to open the app, if open normally, will switch directly to the app, and automatically block JS other behavior 6         7         varIFR=Document.createelement ('iframe');8 ifr.src= 'com.baidu.tieba://';//Open the app's protocol and have an app colleague provide9 Ifr.style.display= 'None';Ten Document.body.appendChild (IFR); One Window.settimeout (function(){ A Document.body.removeChild (IFR); - window.location.href= "https://itunes.apple.com/cn/app/id477927812";//Open the app and have an app colleague provide - },2 the) the     }; - </Script>

This method some browsers are not compatible with the IFRAME, can be window.location method to solve

1 <ahref= "javascript:;"ID= "Openapp">Paste Client</a>2 <Scripttype= "Text/javascript">3 document.getElementById ('Openapp'). onclick= function(e) {4 window.location.href= "com.baidu.tieba://";5 Window.settimeout (function(){6 window.location.href= "https://itunes.apple.com/cn/app/id477927812";//Open the app and have an app colleague provide7         }, -)8     };9 </Script>

Banner on iOS

Reference page: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ Promotingappswithappbanners/promotingappswithappbanners.html

Application Scenarios:

1, the first time users visit the promotion page

A, click Banner, go to the App Store in the corresponding app download page

b, the app download page prompts: Install; user Click Install

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

D, the user normal use of the app

2, the user to visit the promotion page for the second time

A, click Banner, go to the App Store in the corresponding app download page

b, the app download page prompt: Open, user directly click Open

c, the user normal use of the app

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

On iOS, to add an app to the big banner, in fact, only need to add a <meta> tag within the

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

Baidu Post-paste

1 <  namecontent= ' app-id=477927812 '>

Test Demo

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>This ' s a demo</title>6     <Metaname= ' Apple-itunes-app 'content= ' app-id=477927812 '>7 </Head>8 <Body>9     <ahref= "javascript:;"ID= "Openapp">Paste Client</a>Ten </Body> One </HTML> A <Scripttype= "Text/javascript"> - document.getElementById ('Openapp'). onclick= function(e) { -          the         if(Navigator.userAgent.match (/(Iphone|ipod|ipad);?/i)) -            { - window.location.href= "com.baidu.tieba://";//iOS App Protocol - Window.settimeout (function() { + window.location.href= "https://itunes.apple.com/cn/app/id477927812"; -             },  -) +            } A         if(Navigator.userAgent.match (/Android/i)) at         { - window.location.href= "Com.baidu.tieba://app";//Android App Protocol - Window.settimeout (function() { - window.location.href= "https://****.apk";//Android -             },  -)     -         } in     }; - </Script>

"JS" click on the page to determine whether to install the app and open, otherwise jump download method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.