HTML5全屏移動應用

在我的HTML5應用，我有以下元標記，讓應用程式顯示爲全屏應用程序：HTML5全屏移動應用

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" /> 
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="76x76" /> 
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="120x120" /> 
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="152x152" /> 
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="180x180" /> 
    <link href="~/images/icons/logo/touch-icon.png" rel="icon" sizes="192x192" /> 
    <link href="~/images/icons/logo/touch-icon.png" rel="icon" sizes="128x128" />

但每當我點擊應用的鏈接，它會返回瀏覽器，並返回瀏覽器欄。我如何防止這種情況？

測試在Safari中的iOS - 但標記與Android的完整解決方案

來源

2016-11-14 series0ne

您正在測試哪個版本的iOS？ iPad的？蘋果手機。 iOS版本的行爲不同。 –

它是一個原生的移動應用程序（網絡視圖）或網絡應用程序？ –

1）通過這個環節去..希望這會幫助你。 https://gist.github.com/kylebarrow/1042026

2）嘗試這個 - （工程中的iOS 6.1，8.0.2）

$(document).ready(function(){ 
    if (("standalone" in window.navigator) && window.navigator.standalone) { 
     // For iOS Apps 
     $('a').on('click', function(e){ 
     e.preventDefault(); 
     var new_location = $(this).attr('href'); 
     if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){ 
      window.location = new_location; 
     } 
     }); 
    } 
});

3）奔納德爾博客纔是真的好就同樣的問題。 https://www.bennadel.com/blog/2302-preventing-links-in-standalone-iphone-applications-from-opening-in-mobile-safari.htm

4）將此添加到您的網站的<head>部分！

<script type="text/javascript"> 
      (function(document,navigator,standalone) { 
       // prevents links from apps from oppening in mobile safari 
       // this javascript must be the first script in your <head> 
       if ((standalone in navigator) && navigator[standalone]) { 
        var curnode, location=document.location, stop=/^(a|html)$/i; 
        document.addEventListener('click', function(e) { 
         curnode=e.target; 
         while (!(stop).test(curnode.nodeName)) { 
          curnode=curnode.parentNode; 
         } 
         // Condidions to do this only on links to your own app 
         // if you want all links, use if('href' in curnode) instead. 
         if('href' in curnode && (curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host))) { 
          e.preventDefault(); 
          location.href = curnode.href; 
         } 
        },false); 
       } 
      })(document,window.navigator,'standalone'); 
    </script>

來源

2016-12-08 23:52:13 Varsha

-1

因爲您鏈接的網站不屬於您的網絡應用程序，它會在不同的瀏覽器中打開。但是有幾種方法可以解決這個問題。一種方法是發佈Varsha後。另一種我更喜歡的方法是將網頁嵌入到您的網絡應用程序中。

<iframe allowtransparency="true" width="width" height="height" src="https://www.example.com" frameborder="0" allowfullscreen></iframe>

來源

2016-12-10 16:00:57

我鏈接到的網站是應用程序的一部分。他們都是同一個域名。 – series0ne

，那麼你需要從前面添加相同的代碼到每個頁面 –

HTML5全屏移動應用

回答

相關問題