2013-02-05 16 views
26

Sayfanın bir yönlendirme nedeniyle gizlendiğini algılayacak bir mobil safari etkinliğini arıyorum. Bir kullanıcı yüklediyse uygulamanızı doğrudan açmak istiyorum, ardından yüklenmişse facebook'u deneyin ve daha sonra bu kimlik için web sayfasına gidin.Mobil Safari Sayfası Derin Bağlama için kaldırma/gizleme/bulanıklaştırma

  1. 'myapp' kuruluysa, myapp açılır. Ancak safari sekmesi hala facebook.com'a yönlendiriliyor
  2. Eğer 'myapp' kurulu değilse, ama facebook ise, facebook ios uygulaması açılır. Ama safari sekmesi hala aşağıdaki HTML/JS ile test link oluşturduk facebook.com

yönlendiriliyordur:

<!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> 

cevap

19

Güzel kodu.
DÜZENLEME: (return false; ekleme hakkında çıkarılmış öneri)

sadece Zaman Aşımlarını temizleyerek yerine daki setTimeout fonksiyonları içinde bir çek ayarlamayı deneyin. (Takasın basit 1-zamanlı setTimeout çağrıları yerine aralıklarla çok daha etkili olduğunu görüyorum). Ayrıca, bu tarayıcılar bu konumu takip etmeye ve bir hata görüntülemeye çalışacağından, kullanıcının bir masaüstü tarayıcıda olmadığından emin olmak için app:// veya fb:// gibi bir yerel uygulama protokolünü denemeden emin olun.

Dene:

Tabii
<!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> 

, konsol günlükleri un-yorum ve timeout değeri deneme bazı yapmak. Bu tam kod, IOS 6.1 Safari ve Safari 6.0.2 Mac'te başarıyla test edildi. Umarım yardımcı olur!

+0

Bahşiş için teşekkürler! Ne yazık ki bu bir düğme kullanıyorum ve javascript ile yönlendiriyor, çünkü bir bağlantı yerine geçerli değil. Bu yüzden iptal etmek için 'link click bubble' etkinliği yok. –

+0

Haklısınız - Kalçadan vuruldum ve bu gerçeği tamamen gözden kaçırdım! Yine de, tarayıcı kontrol standları ile ilgili öneri. Yukarıda benim düzenlenmiş cevabımı görün - ilgili setleri 'setTimeout' işlevleri içinde hareket ettirin ve clearTimeout'lardan kurtulun. – goddogsrunning

+0

Safari, yeniden başlatıldıktan sonra en son ziyaret edilen sayfayı yeniden açar ve betik bu durumda çalışmayacaktır. Bu davranıştan kaçınmak için, 'window'close();' 'else' bloklarına ekleyebilirsiniz. – ruphus