web-dev-qa-db-ja.com

iOS 7でWebAppからSafariを開く方法

IOSの以前のバージョンでは、<a>タグはMobile Safariを開き、代わりにwebapp（ユーザーによってホーム画面に保存されたHTMLページ）内にとどまるためにそれらをインターセプトする必要がありました。

IOS 7以降、すべてのリンクはWebApp内にとどまっています。本当に欲しいときに、Safariを開く方法を理解できません。

window.openとa target="_blank"を使用してみましたが、どちらも機能しません。

これがサンプルです。 https://s3.amazonaws.com/kaontest/testopen/index.html

IOS 6のホーム画面に保存すると、リンクがSafariを開きます。しかし、iOS 7ではそうではありません。

これは、誰もがよく尋ねる反対の質問であることに注意してください（「Safariを開かない方法」）。その動作は新しいデフォルトのようで、古い動作に戻す方法がわかりません！

javascriptiosweb-applicationssafarimobile-safari
31
Joshua Smith

ターゲット_blankを含むアンカータグはiOS 7.0.3で機能しますが、window.openを使用しても機能せず、7.0.3でWebビュー内で開いたままになります。

window.open('http://www.google.com/', '_blank');
7
Mitchell Simoens

アップデート10/23/13：iOS 7.0.3で修正。これを行うには、リンクにtarget = "xxx"属性を追加します。 mailto：およびfriendsでも機能します。

これはiOS 7.0、7.0.1、7.0.2のバグであり、これを行う方法は知られていません。

これは、Safariで開くリンクが正常に機能する以前のバージョンのiOSからの退行です。これは、外部URLスキームが機能しない（たとえば、「mailto：」も機能しない）、URLを開くことを中心とした問題のクラスターの一部のようです。

このような問題を回避する通常の容疑者は、残念ながら機能しません（たとえば、フォームを使用して「_new」のターゲットで送信する）。

アラートやモーダルダイアログがまったく機能しないことを確認するなど、他のGraveの問題があります。

mayこれらをバグとしてAppleに提出するのに役立つかもしれません http://bugreport.Apple.com

25
thomasfuchs

これは、過去数か月間のベータ版の既知の問題です。回避策はありません。また、私が知ることができることから、Appleは修正に関するETAについて、またはそれがバグであることさえ認識していません。 。

詳細： http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

6
Rob Porter
window.open('http://www.google.com/'); // stays in web app view

<a href='http://www.google.com/' target='_blank'>Click Here</a> // opens in safari

Safariを開きたいが、何らかの理由でこのようなアンカータグを使用することができない場合、 この質問に対するJavaScriptソリューションはSafariでも開きます 。

1
Brett Clapper

iOS v7.0.3リリース10/22/13は問題を修正します。

1
Ed Lee

更新これに続いて、iOS 7.0.3が問題を修正しているように見えることを誰にも知らせたかっただけです。テスト用にスタンドアロンのWebアプリを保存し、本日リリースされた更新により外部リンク/アプリの機能が復元されました。そのため、Webアプリを削除して再保存する代わりに、電話を更新するよう顧客に知らせるためにコードを更新しました。

コメントを追加するだけでしたが、明らかに長すぎます。

Appleは、クロムレスWebアプリをデバイスのホーム画面に保存できるようにすることで、WebAppの世界の舞台を設定しました。この「バグ」は、大きく後退しているように感じます。最終リリースでそのようなギャップのあるバグを残すことは、あまりAppleとは思えません。ロック画面のバイパスで行ったような修正です。明確な理由はないようですが、これが意図的なものであることを私は仕方がありません。

この問題に対処する開発者にとって、私が見つけた唯一の解決策は

1）メタタグApple-mobile-web-app-capableを「no」に設定します-これにより、将来のユーザーが問題に対処できなくなります

2）Webアプリケーションのコードを更新して、「スタンドアロン」およびiOSバージョン7以降を検索しました。条件が満たされたら、問題を説明するポップアップを提供し、そのページにリンクを追加し、ユーザーに許しを求め、リンクをコピーしてサファリに貼り付けるように要求しました。

URLのコピーと貼り付けプロセスを少し簡単にするために、リンクを上下に改行してEdge to Edgeタグでラップしました。

1
JDubDev

当面、この問題に対する2つの解決策を見つけました。どちらも明らかに外部リンクでpreventDefaultを使用しています。

別のWebサイトまたはダウンロードするものにリンクしている場合、私が見る唯一のオプションは、タッチコールアウトプロンプトを取得するためにリンク上で指を保持するように皮肉なことにユーザーに警告することです。次に、WebサイトかPDFかに応じて、リンクをコピーするか、PDFの場合は読み取りリストに追加するように指示します。アラートと確認のモーダルも壊れているため、独自のモーダル通知を実装する必要があります。既にそれを持っている場合、それはそれほど面倒ではないはずです。

更新 [2013-10-25]どうやらiOS 7.0.3で修正され、Safariでリンクが開いているようです...

編集 [2013-10-05] jQuery UIモーダルで使用するものはほとんどここにあります

// iOS 7 external link polyfill
$('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]').on('click', function(e) {

  if (navigator.standalone && /iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
    e.preventDefault(); e.stopPropagation();

    var href = $(this).attr('href');

    var $dialog = $('<div id="ios-copy"></div>')
      .html('<p>iOS 7 prevents us from opening external links in Safari, you can continue to the address and risk losing all navigation or you can copy the address to your clipboard by <strong>holding your finger on the link</strong> for a few seconds.</p><p><a style="background-color: rgba(0,0,0,.75); color: #fff; font-size: 1.25em; padding: 1em;" href="' + href + '">' + href + '</a></p>')
      .appendTo('body')
      .dialog({
        title: 'External link',
        modal: true,
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
      });
  }
});

他の回避策はajaxまたはiframeを使用して外部コンテンツをロードすることですが、アプリに適切なサブブラウザーまたは何かがなければ、大ざっぱに見えます。これらの線に沿って何かがあります。

// iOS 7 external link polyfill
if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent) && window.navigator.standalone) {
  $('a[rel=external], a[href$=".pdf"]').on('click', function(e) {
    e.preventDefault(); e.stopPropagation();

    var link = this;
    var href = $(link).attr('href');

    var frameContainer = $('<div></div>').css({
      position: 'absolute',
      left: 10,
      top: $(link).position().top,
      opacity: 0,
      overflow: 'scroll',
      '-webkit-overflow-scrolling': 'touch',
      height: 520,
      transition: 'opacity .25s',
      width: 300
    });

    var iosFrame = $('<iframe class="iosFrame" seamless="seamless" width="1024" height="5000"></iframe>')
      .attr('src', href)
      .css({
        height: 5000,
        'max-width': 1024,
        width: 1024,
        overflow: 'scroll !important',
        '-webkit-overflow-scrolling': 'touch !important'
      });

    var iosFrameClose = $('<a href="#"><i class="icon-cancel icon-remove icon-3x"></i></a>').css({
      position: 'absolute',
      left: -10,
      top: $(link).position().top - 20,
      'text-shadow': '1px 1px 1px #000',
      transition: 'opacity .25s',
      opacity: 0,
      '-webkit-transform': 'translate3d(0, 0, 0)',
      width: '3em',
      height: '3em'
    }).on('click', function(e) {
      e.preventDefault();
      setTimeout( function() {
        $(frameContainer).remove();
        $(iosFrameClose).remove();
      }, 250);
    });

    iosFrame.appendTo(frameContainer);
    frameContainer.appendTo('body');
    iosFrameClose.appendTo('body');

    iosFrame.contents().css({
      '-webkit-transform': 'translate3d(0, 0, 0)'
    });

    // Show this thing
    setTimeout( function() {
      $(frameContainer).css({ opacity: 1 });
      $(iosFrameClose).css({ opacity: 1 });
    }, 1);
  });
}
1
caktux