webdevqa.jp.net

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

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

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

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