如何从移动浏览器启动应用程序(facebook / twitter / etc),但如果未安装应用程序,则回退到超链接 [英] How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed
问题描述
我希望可能有某种方法可以检测到uri:scheme是否已在浏览器中在移动设备上注册。
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:我d想检查是否安装了facebook,twitter,pinterest应用程序,并且可以从他们关联的uri:scheme启动。
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/..."
}
基本上如果用户安装了facebook,则启动应用程序,如果没有安装应用程序,则回到fb网站的移动版本。
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 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>
我的javascript就是这样的。
注意:有一个那里混合了一些小jQuery,但如果你不想使用它就不需要使用它。
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();
});
})();
我还把它当作要点,你可以分叉和混乱。如果您愿意,还可以在jsfiddle中包含要点。
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.
@ kmallea 分享了要点并从根本上简化了它。 https://gist.github.com/kmallea/6784568
@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();
});
这篇关于如何从移动浏览器启动应用程序(facebook / twitter / etc),但如果未安装应用程序,则回退到超链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!