ブラウザからネイティブiOSアプリを開く方法を探していました。私はここで適切な解決策を見つけました: YouTubeやMapsなどのiPhoneアプリ用にhttp + domainベースのURLスキームを登録することは可能ですか?
このソリューションは、アプリをインストールしている場合に効果的に機能します。ただし、ユーザーがこのアプリをインストールしていない場合、「アドレスが無効であるため、Safariはページを開けません」というエラーメッセージが表示されます。
この動作を防ぎ、代わりにアプリのダウンロードをユーザーに促す方法はありますか?
ここに私のために働く解決策があります:
var timeout;
function preventPopup() {
clearTimeout(timeout);
timeout = null;
window.removeEventListener('pagehide', preventPopup);
}
function openApp() {
$('<iframe />')
.attr('src', appurl)
.attr('style', 'display:none;')
.appendTo('body');
timeout = setTimeout(function() {
document.location = appstore;
}, 500);
window.addEventListener('pagehide', preventPopup);
}
iframeを使用します。
$('<iframe />').attr('src', "appname://").attr('style', 'display:none;').appendTo('body');
これを解決し、不要なiOSサファリアラートを回避するために、jqueryとリスナーイベントを使用せずに、iframeも処理する別のアプローチを使用しました。完璧に機能します。
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = alt;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
setTimeout(function(){
window.location = fallbackUrl; //fallback url
},300);
これはjavascriptなしで機能するため、フォールバックとしてメタリフレッシュを使用しています。このコードは、iOSおよびAndroidで機能します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="1; url=http://www.facebook.com">
<title>Redirecting..</title>
<script>
function tryOpenApp() {
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.src = "fb://feed/";
document.body.appendChild(iframe);
}
</script>
</head>
<body onload="tryOpenApp()">
</body>
</html>