33

我有一个离线工作的 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 页面是问题所在。

4

6 回答 6

30

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

这是我用来避免重写所有链接的一段 javascript 代码。这样，只有那些具有显式target = "_blank"属性的链接才会在 Safari 中打开。所有其他链接将保留在 Web 应用程序中。

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-12T15:59:21.540 回答
18

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

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

于 2011-10-20T19:59:15.713 回答
8

根据我的经验，任何外部链接似乎都会导致应用跳出全屏模式。一种解决方案是使用 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
}

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

于 2011-07-20T08:57:41.647 回答
3

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

为了方便起见，我正在复制下面的代码：

(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-15T10:16:18.413 回答
0

我已经解决的解决方案是用于处理内部链接的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);
    }
  }
});

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

于 2013-10-06T10:30:27.243 回答
0

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

 <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-19T10:16:32.530 回答