29

リダイレクトのためにページが非表示になったことを検出するモバイルサファリのイベントを探しています。ユーザーがアプリをインストールしている場合はアプリを直接開き、インストールされている場合はFacebookを試し、インストールされていない場合はそのIDのWebページにアクセスします。

  1. 'myapp'がインストールされている場合、myappが開きます。しかし、サファリタブはまだfacebook.comにリダイレクトされます
  2. 'myapp'がインストールされていないが、facebookがインストールされている場合は、facebookiosアプリが開きます。しかし、サファリタブはまだfacebook.comにリダイレクトされます

次のHTML/JSを使用してテストリンクを作成しました。

    <!DOCTYPE html>
    <html>
    <head>
            <title>Redirect Test</title>
            <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
            <meta name='viewport' content='initial-scale = 1.0,maximum-scale = 1.0' />
    </head>
    <body>
    <button>Open Oreo</button>
    <script type='text/javascript'>
    jQuery(function(){
            jQuery( 'button' ).on( 'click', function(){
                    var myid = null, fbid = null;

                    // Watch for page leave to kill timers
                    jQuery( window ).on( 'pagehide pageshow blur unload', function(){
                            if ( myid ) {
                                    clearTimeout( myid );
                            }
                            if ( fbid ) {
                                    clearTimeout( fbid );
                            }
                    });

                    window.location = "myapp://fbprofile/oreo";
                    var myid = setTimeout(function(){

                            // My app doesn't exist on device, open facebook
                            window.location = "fb://profile/oreo";
                            fbid = setTimeout(function(){

                                    // Facebook doesn't exist on device, open facebook mobile
                                    window.location = "https://www.facebook.com/oreo";
                            }, 100);
                    }, 100);
            });
    });
    </script>
    </body>
    </html>
4

1 に答える 1

21

いいコード。
編集:(追加に関する提案を削除return false;）

setTimeoutタイムアウトをクリアするだけでなく、関数内にチェックを設定してみてください。（単純な1回のsetTimeout呼び出しではなく、間隔に対してクリアがはるかに効果的であることがわかりました）。app://また、私のようなネイティブアプリプロトコルを試す前に、またはfb://それらのブラウザがその場所をたどろうとしてエラーを表示するため、ユーザーがデスクトップブラウザを使用していないことを確認します。

試す：

<!DOCTYPE html>
<html>
<head>
    <title>Redirect Test</title>
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
    <meta name='viewport' content='initial-scale = 1.0,maximum-scale = 1.0' />
</head>
<body>
<button>Open Oreo</button>
<script type='text/javascript'>
var mobileExp = /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera mini|palm( os)?|plucker|pocket|pre\/|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i;

jQuery(function(){
    jQuery( 'button' ).on( 'click', function(){

        // Don't give desktop browsers a chance to fail on a nativeapp:// protocol
        if(!mobileExp.test(navigator.userAgent)) {
            window.location = "https://www.facebook.com/oreo";
            return;
        }

        var clicked = +new Date, timeout = 100;

        window.location = "myapp://fbprofile/oreo";

        setTimeout(function(){
            // If we're still here after a (timeout), try native facebook app
            if (+new Date - clicked < timeout*2){
                console.log('clicked '+ (+new Date - clicked) +' ago- go to FB');
                window.location = "fb://profile/oreo";
            } else {
                console.log('too late for facebook');
            }
            setTimeout(function(){
                // If we're still here after another (timeout), try facebook web app
                if (+new Date - clicked < timeout*2){
                    console.log('clicked '+ (+new Date - clicked) +' ago- go to browser');
                    window.location = "https://www.facebook.com/oreo";
                } else {
                    console.log('too late for browser');
                }
            }, timeout);
        }, timeout);
    });
});
</script>
</body>
</html>

もちろん、コンソールログのコメントを解除し、の値を試してみてくださいtimeout。この正確なコードは、IOS6.1SafariおよびSafari6.0.2Macで正常にテストされました。それが役に立てば幸い！

于 2013-02-07T12:49:49.337 に答える