HTML5全屏移动应用

在我的HTML5应用，我有以下元标记，让应用程式显示为全屏应用程序：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" />

但每当我点击应用的链接，它会返回浏览器，并返回浏览器栏。我如何防止这种情况？

测试在Safari中的iOS - 但标记与Android的完整解决方案

来源

2016-11-14 series0ne

您正在测试哪个版本的iOS？ iPad的？苹果手机。 iOS版本的行为不同。 –

它是一个原生的移动应用程序（网络视图）或网络应用程序？ –

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）奔纳德尔博客才是真的好就同样的问题。 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>

来源

2016-12-08 23:52:13 Varsha

-1

因为您链接的网站不属于您的网络应用程序，它会在不同的浏览器中打开。但是有几种方法可以解决这个问题。一种方法是发布Varsha后。另一种我更喜欢的方法是将网页嵌入到您的网络应用程序中。

<iframe allowtransparency="true" width="width" height="height" src="https://www.example.com" frameborder="0" allowfullscreen></iframe>

来源

2016-12-10 16:00:57

我链接到的网站是应用程序的一部分。他们都是同一个域名。 – series0ne

，那么你需要从前面添加相同的代码到每个页面 –

HTML5全屏移动应用

回答

相关问题