JavaScript-Determine if a user has an app installed in a mobile browser

Source: Internet
Author: User
Now on the page there is an "open now" button, if the user has installed the app, then call the appropriate app to open, otherwise jump to the download page.

Scheme for known apps

Method 1 found on the Web:

$(document).ready(function () {    var log = function (msg) {        $('body').before('' + msg + '');    };    var timeout, t = 1000, hasApp = true;    setTimeout(function () {        if (hasApp) {            log('安装了app');        } else {            log('未安装app');        }    }, 2000);    function testApp() {        var t1 = Date.now();        var ifr = $('');        ifr.attr('src', 'diaodiao://');        $('body').append(ifr);        // 插入之后,过1000ms执行try_to_open_app方法        timeout = setTimeout(function () {            try_to_open_app(t1);        }, t);    }    function try_to_open_app(t1) {        var t2 = Date.now();        if (!t1 || t2 - t1 < t + 200) {            hasApp = false;        }    }    testApp();});

Method 1 does not work, the log on the page is always "not installed App"

Online Search Method 2:

window.onload = function(){    function isInstalled(){        var originHref = location.href;        var url = originHref.substring(originHref.indexOf('//')+2);        var schemeUrl = "diaodiao://"+url;        window.location=schemeUrl;//打开某手机上的某个app应用        setTimeout(function(){            window.location="http://a.app.qq.com/o/simple.jsp?pkgname=com.diaox2.android&ckey=CK1308661595241";//如果超时就跳转到app下载页        },20000);    }    var downlink = document.querySelector('.downlink');    downlink.addEventListener('click',function(){        isInstalled();    },false)}

The problem with this approach is that window.location=schemeUrl; after the code is executed, Safari pops up a dialog box asking if you want to open it with the app, and then jump to the download link (not timed?). Don't know why the timer doesn't work? )

-----------------New-------------------

上面2种方法肯定有其适用的时期,这些至少是1年多之前的解决办法了,随着IOS/Android系统及浏览器的更新,现在已经不适用。。使用iframe呼起app,我在IOS8.3下的safari中是可以呼起的,但是在9.2.1下的safari是不可以的。在Android5.0.1下测试也通不过,只有在Android Chrome下才能呼起。。

I had a problem with my brother, but I didn't seem to have a very good answer.
iOS9 to open apps in the browser via scheme
-----------------New-------------------

Finally solved (although not so elegant, not covering all browsers or webview), wrote a document:
About deciding whether to install the app in the browser

At the same time, thank you for your advise!

Reply content:

Now on the page there is an "open now" button, if the user has installed the app, then call the appropriate app to open, otherwise jump to the download page.

Scheme for known apps

Method 1 found on the Web:

$(document).ready(function () {    var log = function (msg) {        $('body').before('' + msg + '');    };    var timeout, t = 1000, hasApp = true;    setTimeout(function () {        if (hasApp) {            log('安装了app');        } else {            log('未安装app');        }    }, 2000);    function testApp() {        var t1 = Date.now();        var ifr = $('');        ifr.attr('src', 'diaodiao://');        $('body').append(ifr);        // 插入之后,过1000ms执行try_to_open_app方法        timeout = setTimeout(function () {            try_to_open_app(t1);        }, t);    }    function try_to_open_app(t1) {        var t2 = Date.now();        if (!t1 || t2 - t1 < t + 200) {            hasApp = false;        }    }    testApp();});

Method 1 does not work, the log on the page is always "not installed App"

Online Search Method 2:

window.onload = function(){    function isInstalled(){        var originHref = location.href;        var url = originHref.substring(originHref.indexOf('//')+2);        var schemeUrl = "diaodiao://"+url;        window.location=schemeUrl;//打开某手机上的某个app应用        setTimeout(function(){            window.location="http://a.app.qq.com/o/simple.jsp?pkgname=com.diaox2.android&ckey=CK1308661595241";//如果超时就跳转到app下载页        },20000);    }    var downlink = document.querySelector('.downlink');    downlink.addEventListener('click',function(){        isInstalled();    },false)}

The problem with this approach is that window.location=schemeUrl; after the code is executed, Safari pops up a dialog box asking if you want to open it with the app, and then jump to the download link (not timed?). Don't know why the timer doesn't work? )

-----------------New-------------------

上面2种方法肯定有其适用的时期,这些至少是1年多之前的解决办法了,随着IOS/Android系统及浏览器的更新,现在已经不适用。。使用iframe呼起app,我在IOS8.3下的safari中是可以呼起的,但是在9.2.1下的safari是不可以的。在Android5.0.1下测试也通不过,只有在Android Chrome下才能呼起。。

I had a problem with my brother, but I didn't seem to have a very good answer.
iOS9 to open apps in the browser via scheme
-----------------New-------------------

Finally solved (although not so elegant, not covering all browsers or webview), wrote a document:
About deciding whether to install the app in the browser

At the same time, thank you for your advise!

As you can say, iOS usually uses an IFRAME to open your scheme address, and Android usually uses Location.href to ...
But the reality seems to be much more complicated than this ....
Landlord can refer to this: http://js.40017.cn/touch/hb/p/openApp.js

No tests for the time being
First, a possible solution is proposed.

Request scheme asynchronously to get the status code. (if scheme has a status code, the solution is established)

or You can simply ignore whether the app is open properly

Use an IFRAME to try to open the scheme URI, regardless of success, show a go to download app

Please ask, you wrote the
SetTimeout (function () {

var timeOutDateTime = new Date();if (!loadDateTime || timeOutDateTime - loadDateTime < 1010) {   window.location = self.dataset.href;}        

},1000);
window.location = ' diaodiao://';

Where is loaddatetime defined, and is it complete?

Maybe say a little bit about iOS9.
Recently just put their own webapp with PhoneGap hit a bag, and then to determine whether the phone is installed on the app, if installed, to be able to jump from the content page directly into the app, and, the need is not to see the alert box.
Under IOS9 is OK, as long as there is an apple that can be recognized by the HTTPS connection is good. The key word is Universal Link. NetEase News is this way, after testing, basically can achieve the demand of judgment.

  • Related Article

    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.