如何让 iPhone/iPad 网络应用程序保持全屏模式？答案

【问题标题】：How do you keep an iPhone/iPad web app in full screen mode?如何让 iPhone/iPad 网络应用程序保持全屏模式？
【发布时间】：2011-09-19 17:53:37
【问题描述】：

我有一个离线工作的 HTML5 iPad 应用程序。该应用程序本质上由 4 个 html 文件和 3 个 aspx 文件组成。我的缓存清单已设置，因此只有 html 文件可脱机使用，而 aspx 文件需要网络连接。这一切都很好！

现在，我已经完成了对应用程序的最后润色，并尝试完成主屏幕图标，以全屏模式运行等。我添加了我认为必要的内容元标记使应用程序在添加到主屏幕后最初以全屏模式启动。我认为标签正确的原因是，如果我在 html 页面之间来回导航，应用程序将（正确）启动并保持全屏模式。我遇到的问题是让应用程序在单击服务器（aspx）链接之一时保持全屏模式。

单击服务器链接 (aspx) 时，Mobile Safari 会进入完整浏览器模式并打开一个新窗口。这种行为是不可接受的，我希望我在这里遗漏了一些简单的东西。

这是我在所有页面上使用的元标记（html + aspx）：

  <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 页面是个问题。

【问题讨论】：

您的 html 和 aspx 的域是什么？它们有什么不同吗？

标签： ios iphone-standalone-web-app

【解决方案1】：

让计算机完成繁琐的工作，这就是它们的用途。

这是我用来避免重写所有链接的一段 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; 
        }
    }
}

【讨论】：

很好的解决方案，我一定要试一试！
您能解释一下这是如何工作的吗？你返回 false 到什么？
到 onclick() 函数——意思是“不要像往常一样打开链接，我已经处理好了”。

【解决方案2】：

这是一个可以提供帮助的 jQuery 插件：https://github.com/mrmoses/jQuery.stayInWebApp

它是一个类似的 javascript 解决方案，但具有更多功能。默认情况下，它将附加到所有链接，但您可以使用它附加到具有特定类或其他内容的链接。它还可以检测 iOS 全屏模式，以免妨碍其他浏览器和设备。

【讨论】：

这是最好的方法.. 对于 iOS 7 的附加功能 .. 单击链接时，网络会停留在 webapp 中 .. 所以我添加了一些代码以确保这不适用于 ios 7：if( (window.navigator 中的“独立”) && window.navigator.standalone && parseInt(navigator.userAgent.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10)

【解决方案3】：

根据我的经验，任何外部链接似乎都会导致应用跳出全屏模式。一种解决方案是使用 javascript 和 location 对象来管理您的导航。如下：

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
}

我知道必须以这种方式修改您的链接很痛苦，但这是我发现解决您面临的问题的唯一方法。

【讨论】：

谢谢，此时我不想重新编写程序。我希望这是他们在未来的 iOS 版本中改变的东西。

【解决方案4】：

KPM 解决方案的问题在于，它会混淆应用所有页面中的所有链接，有时会导致难以发现的错误，尤其是当您的应用是 ajax 密集型应用时。我在 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');

【讨论】：

【解决方案5】：

我已经解决的解决方案是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 你应该看看，它包括作为库的 Waypoints，如果值得的话，我可能会包括所有这些链接处理和 iOS 7 修复。

【讨论】：

【解决方案6】：

将其添加到索引文件就可以了。

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

【讨论】：