ios 如何让 iPhone/iPad 网络应用保持全屏模式？

How do you keep an iPhone/iPad web app in full screen mode?

提问by Don

I have an HTML5 iPad app that works offline. The app essentially consists of 4 html files and 3 aspx files. My cache manifest is setup so that only the html files are available offline, and the aspx files require a network connection. This is all working great!

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

Now, I've gotten to the point where I'm putting the finishing touches on the app and trying to finalize the home screen icons, running in full screen mode, etc. I've added what I believe are the necessary meta tags to make the app initially launch in full screen mode once it's been added to the home screen. The reason I believe the tags are correct is that the app will (correctly) launch and stay in full screen mode if I navigate back and forth between the html pages. The problem I'm having is getting the app to stay in full screen mode when one of the server (aspx) links are clicked.

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

When a server link (aspx) is clicked Mobile Safari kicks out into full browser mode and opens a new window. This behavior is not acceptable and I'm hoping that I'm missing something simple here.

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

Here are the meta tags I'm using on all of my pages (html + aspx):

这是我在所有页面上使用的元标记（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" />

Hopefully this provides all of the necessary information needed to understand the problem. I have seen other links on here stating that ANY page other than the one bookmarked on the home page causes some folks to exit full screen mode. This is not the problem I'm having, so I wanted to start a new discussion. Again, I feel that if I had 5 more html pages in the app it would continue to stay in full screen mode. The aspx pages are the problem in my situation.

希望这提供了理解问题所需的所有必要信息。我在这里看到了其他链接，说明除了主页上标记的页面之外的任何页面都会导致一些人退出全屏模式。这不是我遇到的问题，所以我想开始一个新的讨论。再次，我觉得如果我在应用程序中有 5 个更多的 html 页面，它会继续保持全屏模式。在我的情况下，aspx 页面是问题所在。

采纳答案by KPM

Let the computer do the tedious job, that's what they're made for.

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

This is a piece of javascript code I use to avoid rewriting all my links. With that, only those links that have an explicit target = "_blank"attribute will open in Safari. All other links will remain inside the web app.

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

回答by Alpha Codemonkey

Heres a jQuery plugin that could help: https://github.com/mrmoses/jQuery.stayInWebApp

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

Its a similar javascript solution, but has a few more features. By default it will attach to all links, but you can use it to attach to links with a certain class or something. It also detects iOS full screen mode so that it doesnt get in the way of other browsers and devices.

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

回答by Journeyman

In my experience, any external link seems to cause the app to jump out of full-screen mode. One solution is to manage your navigation using javascript and the location object. As follows:

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

HTML:

HTML：

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

Javascript:

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
}

I know it's a pain to have to rework your links in this way, but it is the only way I have found to solve the problem you are facing.

我知道必须以这种方式重新处理链接很痛苦，但这是我找到的解决您面临的问题的唯一方法。

回答by Jeshurun

The problem with KPM's solution is that it messes with all links in all pages of your app, sometimes causing hard-to-find bugs, especially if your app is ajax intensive. I found a much better solution hereon github.

KPM 解决方案的问题在于它混淆了您应用程序所有页面中的所有链接，有时会导致难以发现的错误，尤其是在您的应用程序是 ajax 密集型的情况下。我发现了一个更好的解决方案在这里GitHub上。

I am reproducing the code below for the sake of convenience:

为方便起见，我正在复制以下代码：

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

回答by caktux

The solution I've settled with is Waypointsfor handling internal links. It has an open() method for external links which works up until iOS 6. After which you need this other fixfor iOS 7.

我已经解决的解决方案是用于处理内部链接的Waypoints。它有一个用于外部链接的 open() 方法，该方法一直工作到 iOS 6。之后你需要为 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);
    }
  }
});

There's also Swipy.jsyou should check out, it includes Waypoints as a library and I might include all this link handling and the iOS 7 fix if it's worth it.

还有Swipy.js你应该看看，它包括 Waypoints 作为一个库，如果值得的话，我可能会包括所有这些链接处理和 iOS 7 修复。

回答by onlykalu

Adding this to index file will do the trick.

将此添加到索引文件将解决问题。

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