如何在全屏模式下保存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网络应用程序？

回答

相关问题