[ios]HTML5 全屏移动应用程序

标签: html5 Android ios
发布时间: 2016/12/24 6:34:36
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

在我的 HTML5 应用程序我有以下的 meta 标记,允许应用程序将显示为一个全屏应用程序︰

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

但每当我单击应用程序中的链接,它可以追溯到浏览器,并带回浏览器栏。如何防止这?

测试 Safari 的 iOS 只-但标记与 android 为一个完整的解决方案

解决方法 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 纳达尔博客对于同一问题真的很好。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>
赞助商