web-dev-qa-db-ja.com

iPhone Safari Web Appは新しいウィンドウでリンクを開きます

ホーム画面にアイコンを追加した後、ウェブに問題があります。 Webがホーム画面から起動されると、すべてのリンクがSafariの新しいウィンドウで開きます（そして全画面機能が失われます）。どうすれば防ぐことができますか？私は助けを見つけることができず、同じ未回答の質問だけを見つけました。

iphonesafariiphone-standalone-web-app
152
Pavel Linkesch

JavaScriptソリューションを iWebKit フレームワークで見つけました：

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
    a[i].onclick=function()
    {
        window.location=this.getAttribute("href");
        return false
    }
}
107
Pavel Linkesch

ここでの他のソリューションは、外部リンク（おそらくSafariで外部的に開きたい）を考慮しないか、相対リンク（それらのドメインなしで）を考慮しません。

Html5 mobile-boilerplateプロジェクトは、このGistにリンクしています。このGistには、トピックに関する良い議論があります。 https://Gist.github.com/1042026

彼らが思いついた最終的なコードは次のとおりです。

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.Host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
92
rmarscher

JQueryを使用している場合は、次のことができます。

$("a").click(function (event) {
    event.preventDefault();
    window.location = $(this).attr("href");
});
46
David H.

これは、iOS 6.1でBootstrap JSリンク（つまり、ドロップダウンメニューなど）で機能しています

$(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;
        }
      });
    }
  });
20
Sean

これは古い質問であり、ここでの解決策の多くはJavaScriptを使用しています。それ以来、iOS 11.3がリリースされ、 scope member を使用できるようになりました。スコープメンバーは"/"のようなURLで、そのスコープの下のすべてのパスは新しいページを開きません。

スコープメンバーは、このWebアプリケーションのアプリケーションコンテキストのナビゲーションスコープを表す文字列です。

これが私の例です：

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en-US",
  "start_url": "/",
  "scope": "/",
  ...
}

それについてもっと読むこともできます here 。この機能を提供する generator を使用することもお勧めします。

範囲を指定すると、すべてがAndroidと同様に期待どおりに機能し、範囲外の宛先はSafariで開きます。PWAへの戻るボタン（ステータスバーにある小さなボタン）があります。

9
Amir Raminfar

JQuery Mobileを使用している場合、data-ajax = 'false'属性を使用すると新しいウィンドウが表示されます。実際、これはajaxEnabledがオフになっているとき、外部リンクによって、$。mobile.ajaxEnabled設定によって、またはtarget = ''属性を持つことによって、いつでも発生します。

これを使用して修正できます：

$("a[data-ajax='false']").live("click", function(event){
  if (this.href) {
    event.preventDefault();
    location.href=this.href;
    return false;
  }
});

（live（）メソッドのRichard Pooleに感謝します-bind（）で動作しませんでした）

AjaxEnabledをグローバルにオフにした場合、[data-ajax = 'false']を削除する必要があります。

これは、実際には新しいウィンドウを実際に禁止しているのはAjaxリンクであるjQuery Mobile固有の問題であると予想していたため、理解するのにかなり時間がかかりました。

5
Jason Prawn

Davidsの回答とRichardsのコメントに基づいて、ドメインチェックを実行する必要があります。そうしないと、他のWebサイトへのリンクもWebアプリで開かれます。

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    if (href.indexOf(location.hostname) > -1)
    {
        event.preventDefault();
        window.location = href;
    }
});
5
Thomas Kekeisen

このコードはiOS 5で動作します（私にとってはうまくいきました）：

ヘッドタグ内：

<script type="text/javascript">
    function OpenLink(theLink){
        window.location.href = theLink.href;
    }
</script>

同じウィンドウで開きたいリンクで：

<a href="(your website here)" onclick="OpenLink(this); return false"> Link </a>

このコメントからこのコードを入手しました： iphone web app meta tags

3
SerinEleven

スタンドアロンのWebAppでのみ動作することを確認し、jQueryを使用せずに動作し、iOS 8.2でテストされただけなので、非常に完全で効率的なものを見つけました。

Stay Standalone：Mobile Safariを開くスタンドアロンWebアプリのリンクを禁止する

3
DavidTaubmann

ターゲットが明示的に「_blank」に設定されている場合も、新しいウィンドウでリンクを開くことを許可する必要があります。

$('a').live('click', function (event)
{      
    var href = $(this).attr("href");

    // prevent internal links (href.indexOf...) to open in safari if target
    // is not explicitly set_blank, doesn't break href="#" links
    if (href.indexOf(location.hostname) > -1 && href != "#" && $(this).attr("target") != "_blank")
    {
        event.preventDefault();
        window.location = href;
    }

});
3
daformat

また、ほぼ通常どおりリンクを行うことができます。

<a href="#" onclick="window.location='URL_TO_GO';">TEXT OF THE LINK</a>

そして、ハッシュタグとhrefを削除することができます。それが行うすべてが外観に影響します。

2
JuR

これは、戻るボタンを妨げていたショーンのわずかに適合したバージョンです

// this function makes anchor tags work properly on an iphone

$(document).ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
  // For iOS Apps
  $("a").on("click", function(e){

    var new_location = $(this).attr("href");
    if (new_location != undefined && new_location.substr(0, 1) != "#" && new_location!='' && $(this).attr("data-method") == undefined){
      e.preventDefault();
      window.location = new_location;
    }
  });
}

}）;

2
Richard Turner

これがiOS 6で私にとってうまくいったことです（rmarscherの答えをわずかに適応させました）：

<script>                                                                
    (function(document,navigator,standalone) {                          
        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;                         
                }                                                       
                if ("href" in curnode && (curnode.href.indexOf("http") || ~curnode.href.indexOf(location.Host)) && curnode.target == false) {
                    e.preventDefault();                                 
                    location.href=curnode.href                          
                }                                                       
            },false);                                                   
        }                                                               
    })(document,window.navigator,"standalone")                          
</script>
2
bjh

IOS Webアプリで使用した回避策の1つは、送信ボタンからすべてのリンク（CSSによるボタン）を作成したことです。そこで、リンク先に投稿するフォームを開いて、type = "submit"を入力します。これは最良の方法ではありませんが、このページを見つける前に見つけたものです。

1
dster77

@ rmarscher's answer からbowerインストール可能パッケージを作成しました。これはここにあります：

http://github.com/stylr/iosweblinks

bower install --save iosweblinksを使用すると、bowerでスニペットを簡単にインストールできます

1
Robin van Baalen

Target = "_ blank"のリンクを除く、スタンドアロンWebアプリモード内のすべてのリンクを開くことを好みます。もちろん、jQueryを使用します。

$(document).on('click', 'a', function(e) {
    if ($(this).attr('target') !== '_blank') {
        e.preventDefault();
        window.location = $(this).attr('href');
    }
});
1
Alex Haas

JQuery Mobileを使用している場合、上記のソリューションはポップアップダイアログを壊します。これにより、webapp内にリンクが保持され、ポップアップが許可されます。

$(document).on('click','a', function (event) {
    if($(this).attr('href').indexOf('#') == 0) {
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});

次の方法でもできます：

$(document).on('click','a', function (event){
    if($(this).attr('data-rel') == 'popup'){
        return true;
    }
    event.preventDefault();
    window.location = $(this).attr('href');     
});
1
Hexchaimen

Twitter BootstrapおよびRails 3を使用する場合

$('a').live('click', function (event) {
  if(!($(this).attr('data-method')=='delete')){
    var href = $(this).attr("href");
    event.preventDefault();
    window.location = href; 
  }   
});

削除リンクはまだこのように機能しています。

1
wouf

これがページ上のすべてのリンクに使用するものです...

document.body.addEventListener(function(event) {
    if (event.target.href && event.target.target != "_blank") {
        event.preventDefault();
        window.location = this.href;                
    }
});

JQueryまたはZeptoを使用している場合...

$("body").on("click", "a", function(event) {
   event.target.target != "_blank" && (window.location = event.target.href);
});
0
alex