如何深入鏈接網站

Question

<a class="grey-text text-lighten-3" target="_blank" href="javascript:void(0);" onclick="document.write(yourOS())">Instagram</a> 



function yourOS() { 
var ua = navigator.platform.toLowerCase(); 
if (ua.indexOf("android") != -1) { 
    document.write(.link("instagram://user?username=owendunnigan")); 
} else { 
    .link("http://www.instagram.com/OwenDunnigan"); 
} 
} 

我想深入鏈接到我的網站的應用程序，但我不知道如何讓它去計算機上的普通老Instagram，但然後去應用程序在Android或iOS設備上。我知道這些鏈接是有效的，因爲我單獨嘗試了這些鏈接。

Answer 1

我會以不同的方式來解決這個問題。而不是onclick檢查來源，我會做這個onload。所以：

<script> 
    function onLoad(){ 
     var urlLink = "http://www.instagram.com/OwenDunnigan"; 
     var urlLink2 = "http://www.twitter.com/OwenDunnigan"; 
     var urlLink3 = "http://www.facebook.com/OwenDunnigan"; 
     var ua = navigator.userAgent.toLowerCase(); 
     var isAndroid = ua.indexOf("android") > -1; 
     if(isAndroid) { 
      urlLink = "instagram://user?username=owendunnigan"; 
      urlLink = "twitter://user?username=owendunnigan"; 
      urlLink = "facebook://user?username=owendunnigan"; 
     } 
     document.getElementById('yourLink').setAttribute('href', urlLink); 
     document.getElementById('yourLink2').setAttribute('href', urlLink2); 
     document.getElementById('yourLink3').setAttribute('href', urlLink3); 
    } 
    window.onload = onLoad; 
    </script> 

    <a id="yourLink" class="grey-text text-lighten-3" target="_blank">Link</a> 

我測試了這個在我的android設備/筆記本電腦上，它的工作。

編輯：下來和骯髒的方式。通過爲onload函數調用傳遞變量的函數，您可以創建更多的OOP風格，但爲了簡單起見，這樣做的確有用。

EDIT2：

<script> 
     function getMobileOperatingSystem() { 
      var userAgent = navigator.userAgent || navigator.vendor || window.opera; 
      if(userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) 
      { 
       return 'iOS'; 
      } 
      else if(userAgent.match(/Android/i)) 
      { 
       return 'Android'; 
      } 
      else 
      { 
       return 'unknown'; 
      } 
     } 

     function onLoad(){ 
      var urlLink1 = "http://www.instagram.com/OwenDunnigan"; 
      var urlLink2 = "http://www.twitter.com/OwenDunnigan"; 
      var urlLink3 = "http://www.facebook.com/OwenDunnigan"; 
      switch(getMobileOperatingSystem()){ 
       case 'Android': 
        urlLink1 = "instagram://user?username=owendunnigan"; 
        urlLink2 = "twitter://user?username=owendunnigan"; 
        urlLink3 = "facebook://user?username=owendunnigan"; 
        break; 
       case 'iOS': 
        urlLink1 = "instagram://user?username=owendunnigan"; 
        urlLink2 = "twitter://user?username=owendunnigan"; 
        urlLink3 = "facebook://user?username=owendunnigan"; 
        break; 
       default: 
        break; 
      } 
      document.getElementById('yourLink1').setAttribute('href', urlLink1); 
      document.getElementById('yourLink2').setAttribute('href', urlLink2); 
      document.getElementById('yourLink3').setAttribute('href', urlLink3); 
     } 
     window.onload = onLoad; 
     </script> 

     <a id="yourLink1" class="grey-text text-lighten-3" target="_blank">Link1</a> 
     <a id="yourLink2" class="grey-text text-lighten-3" target="_blank">Link2</a> 
     <a id="yourLink3" class="grey-text text-lighten-3" target="_blank">Link3</a> 

從這裏清理了代碼和功能推出：Detecting iOS/Android Operating system 您可以通過簡單地擴大檢測功能，並添加case語句添加其他系統。當然，我沒有添加一個你通常會做的默認情況聲明，但是我首先調用了這些變量，所以沒有理由在我看來重置它們，但是你可以用它做更多的事情。讓我知道如果這不起作用。