如何在全屏模式下保存iPhone/iPad網絡應用程序？

我有一個脫機工作的HTML5 iPad應用程序。該應用程序基本上由4個html文件和3個aspx文件組成。我的緩存清單已設置爲只有html文件可脫機使用，並且aspx文件需要網絡連接。這一切都很好！如何在全屏模式下保存iPhone/iPad網絡應用程序？

現在，我已經到了我正在對應用程序進行收尾處理並嘗試完成主屏幕圖標，以全屏模式運行等的地步。我已經添加了我認爲是的必要的元標記，使應用程序在添加到主屏幕後首先以全屏模式啓動。我認爲標籤正確的原因是，如果我在html頁面之間來回導航，應用程序將（正確）啓動並保持全屏模式。我遇到的問題是讓應用程序在點擊某個服務器（aspx）鏈接時保持全屏模式。

當一個服務器鏈接（CSS）點擊移動Safari瀏覽器踢出到整個瀏覽器模式，並打開一個新窗口。這種行爲是不可接受的，我希望我在這裏錯過簡單的東西。

下面是我用我所有的網頁（HTML + CSS）的meta標籤：

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

希望這提供了所有的理解問題的必要信息。我在這裏看到了其他的鏈接，說明除了在主頁上書籤的網頁之外的任何頁面都會導致一些人退出全屏模式。這不是我遇到的問題，所以我想開始一個新的討論。同樣，我覺得如果我在應用中有5個以上的HTML頁面，它將繼續保持全屏模式。 aspx頁面是我的情況中的問題。

來源

2011-06-21 Don

什麼是你的HTML和你的aspx域？他們不一樣嗎？ –

兩者都有相同的域名。 – Don

讓電腦做單調乏味的工作，這就是他們的了哪些。

這是一段JavaScript代碼，我用它來避免重寫我的所有環節。因此，只有那些具有明確的target = "_blank"屬性的鏈接纔會在Safari中打開。所有其他鏈接將保留在網絡應用程序內。

var a=document.getElementsByTagName("a"); 
for(var i=0;i<a.length;i++) { 
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") { 
     a[i].onclick=function() { 
       window.location=this.getAttribute("href"); 
       return false; 
     } 
    } 
}

來源

2011-09-12 15:59:21 KPM

偉大的解決方案，我將不得不嘗試一下！ – Don

不起作用:( - 第一個鏈接我點擊發射safari。 –

在新iPad上完美工作。 – Jeshurun

以我的經驗，任何外部鏈接似乎導致應用程序跳出全屏模式。一種解決方案是使用javascript和位置對象來管理導航。具體如下：

HTML：

<a href="javascript:navigator_Go('abc.aspx');">Go</a>

的Javascript：

function navigator_Go(url) { 
    window.location.assign(url); // This technique is almost exactly the same as a full <a> page refresh, but it prevents Mobile Safari from jumping out of full-screen mode 
}

我知道這是一個痛苦的必須返工這樣你的鏈接，但它是我發現的唯一途徑解決你面臨的問題。

來源

2011-07-20 08:57:41 Journeyman

謝謝，我不想在這一點上重新開發這個程序。我希望這是他們在未來iOS版本中改變的東西。 – Don

繼承人jQuery插件，可以幫助：https://github.com/mrmoses/jQuery.stayInWebApp

它類似的JavaScript的解決方案，但有一些更多的功能。默認情況下，它會附加到所有鏈接，但是您可以使用它附加到某個類或某個類的鏈接。它還檢測iOS全屏模式，使其不會妨礙其他瀏覽器和設備。

來源

2011-10-20 19:59:15

出色地工作。十分優雅。 – techdude

這是最好的方式..爲iOS 7的添加..網絡留在webapp時，點擊鏈接..所以我添加一些代碼，以確保這不工作的ios 7：\t \t \t if（（「standalone」在window.navigator中）&& window.navigator.standalone && parseInt（navigator.userAgent.match（/ OS（\ d +）_（\ d +）_？（\ d +）？/）[1]，10）<= 6 && navigator.userAgent.match（/（iPad | iPhone | iPod）/ g））{ –

與KPM的解決方案的問題是，它與您的應用程序的所有頁面所有鏈接食堂，有時會造成難以發現的錯誤，特別是如果你的應用程序是阿賈克斯密集。我在github上發現了一個更好的解決方案here。

我複製下面的代碼爲方便起見：

(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');

來源

2012-09-15 10:16:18 Jeshurun

的解決方案，我已經與入駐Waypoints用於處理內部鏈接。它有一個外部鏈接的open（）方法，其工作，直到iOS版6.在這之後，你需要this other fix爲iOS 7

// Internal link handling 
Waypoints 
    .intercept('a') 
    .ignore('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]'); 
    // .resume(); 

// External link handling... 
$('a').on('click', function(e) { 
    var href = $(this).attr('href'); 

    if ($(this).is('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]') || (href.indexOf('http') >= 0 && href.indexOf(document.location.host) === -1)) { 
    e.preventDefault(); 
    var link = this; 

    if (navigator.standalone) { 
     if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent)) { 
     // iOS 7 external link polyfill 
     e.stopPropagation(); 

     // Your custom dialog code for iOS 7 and external links 
     } 
     else { 
     Waypoints.open(href); 
     } 
    } 
    else { 
     window.open(href); 
    } 
    } 
});

還有Swipy.js你應該看看，它包括航點爲庫和我可能包括所有這些鏈接處理和iOS 7修補程序，如果它是值得的。

來源

2013-10-06 10:30:27 caktux

將此添加到索引文件將會有所斬獲。

<head> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-touch-fullscreen" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

    <script type」javascript="" text」=""> 
     document.addEventListener(‘DOMContentLoaded’, function(){ 
     var updateStatusBar = navigator.userAgent.match(/iphone|ipad|ipod/i) && navigator.appVersion.match(/OS (\d)/) && parseInt(navigator.appVersion.match(/OS (\d)/)[1], 10) >= 7 && window.navigator.standalone; 
     if (updateStatusBar) { 
      document.body.classList.add(‘platform-ios’); 
      document.body.classList.add(‘platform-cordova’); 
     } 
     }); 
    </script>

來源

2017-06-19 10:16:32 onlykalu

如何在全屏模式下保存iPhone/iPad網絡應用程序？

回答

相關問題