javascript - How to launch apps (facebooktwitteretc) from mobile browser but fall back to hyperlink if the app isn't ins

admin管理员组

文章数量:1194785

I am hoping there might be some way of detecting whether or not an uri:scheme is registered on a mobile device from within the browser.

IE: I'd like to check if the facebook, twitter, pinterest apps are installed and can be launched from their associated uri:scheme.

if(fb_isInstalled) {
    // href="fb://profile/...."
} else {
    // href="/..."
}

Basically if the user has installed facebook, then launch the app, but fall back to the mobile version of the fb website if the app is not installed.

I am hoping there might be some way of detecting whether or not an uri:scheme is registered on a mobile device from within the browser.

IE: I'd like to check if the facebook, twitter, pinterest apps are installed and can be launched from their associated uri:scheme.

if(fb_isInstalled) {
    // href="fb://profile/...."
} else {
    // href="http://m.facebook.com/..."
}

Basically if the user has installed facebook, then launch the app, but fall back to the mobile version of the fb website if the app is not installed.

• javascript
• mobile-browser

Share Improve this question Follow edited May 28, 2013 at 15:53 Chase Florell asked Dec 3, 2012 at 0:19 Chase FlorellChase Florell 47.3k5959 gold badges190190 silver badges382382 bronze badges 6

• Maybe you want to check if FB app is installed. Check here, stackoverflow.com/questions/6382659/… – e7fendy Commented Dec 3, 2012 at 1:00
• 4 I need to do it in the browser, not Android related. – Chase Florell Commented Dec 3, 2012 at 1:02
• Should this work on all mobile platforms? – Šime Vidas Commented Dec 3, 2012 at 1:05
• @ŠimeVidas "Should this work on all mobile platforms?" - it needs to work in the browser. – Chase Florell Commented Jan 16, 2014 at 18:17
• 1 @taztodgmail... Possible duplicate, yes... But at least this one has an answer. – Chase Florell Commented Jun 3, 2014 at 23:48

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 23

I think I've got a working solution.

 <!-- links will work as expected where javascript is disabled-->
 <a class="intent"   
    href="http://facebook.com/someProfile"   
    data-scheme="fb://profile/10000">facebook</a>

And my javascript works like this.
note: there's a little jQuery mixed in there, but you don't need to use it if you don't want to.

(function () {

    // tries to execute the uri:scheme
    function goToUri(uri, href) {
        var start, end, elapsed;

        // start a timer
        start = new Date().getTime();

        // attempt to redirect to the uri:scheme
        // the lovely thing about javascript is that it's single threadded.
        // if this WORKS, it'll stutter for a split second, causing the timer to be off
        document.location = uri;
        
        // end timer
        end = new Date().getTime();

        elapsed = (end - start);

        // if there's no elapsed time, then the scheme didn't fire, and we head to the url.
        if (elapsed < 1) {
            document.location = href;
        }
    }

    $('a.intent').on('click', function (event) {
        goToUri($(this).data('scheme'), $(this).attr('href'));
        event.preventDefault();
    });
})();

I also threw this up as a gist that you can fork and mess with. You can also include the gist in a jsfiddle if you so choose.

---

Edit

@kmallea forked the gist and radically simplified it. https://gist.github.com/kmallea/6784568

// tries to execute the uri:scheme
function uriSchemeWithHyperlinkFallback(uri, href) {
    if(!window.open(uri)){
        window.location = href;
    }
}

// `intent` is the class we're using to wire this up. Use whatever you like.
$('a.intent').on('click', function (event) {
    uriSchemeWithHyperlinkFallback($(this).data('scheme'), $(this).attr('href'));
    // we don't want the default browser behavior kicking in and screwing everything up.
    event.preventDefault();
});

本文标签：