HTML5 全屏移动应用答案

【问题标题】：HTML5 full-screen mobile appsHTML5 全屏移动应用
【发布时间】：2016-11-14 23:45:16
【问题描述】：

在我的 HTML5 应用程序中，我有以下元标记以允许应用程序显示为全屏应用程序：

    <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="76x76" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="120x120" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="152x152" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
    <link href="~/images/icons/logo/touch-icon.png" rel="icon" sizes="192x192" />
    <link href="~/images/icons/logo/touch-icon.png" rel="icon" sizes="128x128" />

但每当我点击应用程序中的链接时，它就会返回浏览器，并带回浏览器栏。如何防止这种情况发生？

仅在适用于 iOS 的 Safari 上测试 - 但使用 android 标记以获得完整的解决方案

【问题讨论】：

您正在测试哪个版本的 iOS？平板电脑？苹果手机。不同 iOS 版本的行为不同。
是原生移动应用（webview）还是网络应用？

标签： android ios html

【解决方案1】：

1) 浏览此链接。希望对您有所帮助。 https://gist.github.com/kylebarrow/1042026

2) 试试这个 - （适用于 iOS 6.1、8.0.2）

$(document).ready(function(){
    if (("standalone" in window.navigator) && window.navigator.standalone) {
      // For iOS Apps
      $('a').on('click', function(e){
        e.preventDefault();
        var new_location = $(this).attr('href');
        if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
          window.location = new_location;
        }
      });
    }
});

3) Ben Nadel 博客在同样的问题上非常好。 https://www.bennadel.com/blog/2302-preventing-links-in-standalone-iphone-applications-from-opening-in-mobile-safari.htm

4)将此添加到您网站的<head> 部分！

    <script type="text/javascript">
            (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');
    </script>

【讨论】：