web-dev-qa-db-ja.com

iPhone / iPad Webアプリを全画面モードにするにはどうすればよいですか？

オフラインで動作するHTML5 iPadアプリがあります。このアプリは、基本的に4つのhtmlファイルと3つのaspxファイルで構成されています。キャッシュマニフェストは、htmlファイルのみがオフラインで利用できるように設定されており、aspxファイルにはネットワーク接続が必要です。これはすべてうまくいきます！

今、私はアプリに最後の仕上げを施し、ホーム画面アイコンを完成させ、フルスクリーンモードで実行するなどのポイントに到達しました。必要と思われるメタタグを追加しましたアプリをホーム画面に追加したら、最初に全画面モードで起動するようにします。タグが正しいと思う理由は、htmlページ間を移動すると、アプリが（正しく）起動し、フルスクリーンモードのままになるためです。私が抱えている問題は、サーバー（aspx）リンクの1つがクリックされたときに、アプリを全画面モードのままにしておくことです。

サーバーリンク（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ページが問題です。

iosiphone-standalone-web-app
32
Don

コンピューターに退屈な仕事をさせてください、それが彼らのために作られたものです。

これは、すべてのリンクを書き換えないようにするために使用する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; 
        }
    }
}
30
KPM

役立つjQueryプラグインは次のとおりです。 https://github.com/mrmoses/jQuery.stayInWebApp

同様のjavascriptソリューションですが、さらにいくつかの機能があります。デフォルトでは、すべてのリンクにアタッチされますが、特定のクラスまたは何かを持つリンクにアタッチするために使用できます。また、iOSの全画面モードを検出して、他のブラウザーやデバイスの邪魔にならないようにします。

17
Alpha Codemonkey

私の経験では、外部リンクがあるとアプリが全画面モードから飛び出すようです。 1つの解決策は、javascriptとロケーションオブジェクトを使用してナビゲーションを管理することです。次のように：

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
}

このようにリンクを作り直さなければならないのは苦痛ですが、あなたが直面している問題を解決する唯一の方法です。

8
Journeyman

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');
3
Jeshurun

私が解決した解決策は、内部リンクを処理するための Waypoints です。 iOS 6まで動作する外部リンク用のopen（）メソッドがあります。その後、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修正の価値があればそれをすべて含めることができます。

0
caktux

これをインデックスファイルに追加すると、うまくいきます。

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