iPhone Safari Web App bağlantıları yeni pencerede açar

Ana Ekrana simge ekledikten sonra web ile ilgili sorun yaşıyorum. Web Ana Ekrandan başlatılırsa, tüm bağlantılar Safari'de yeni pencerede açılır (ve tam ekran işlevselliğini kaybeder). Nasıl önleyebilirim? Herhangi bir yardım bulamadım, sadece aynı cevaplanmamış soru.

JavaScript çözümünü iWebKit çerçevesinde buldum :

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

Buradaki diğer çözümler ya harici bağlantıları (muhtemelen Safari'de harici olarak açmak istediğinizi) veya göreli bağlantıları (içinde alan olmadan) hesaba katmaz.

Html5 mobile-boilerplate projesi, bu konuda iyi bir tartışmaya sahip olan bu öze bağlantı veriyor: https://gist.github.com/1042026

İşte geldikleri son kod:

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

JQuery kullanıyorsanız şunları yapabilirsiniz:

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

Bu benim için iOS 6.1'de ve Bootstrap JS bağlantılarında (örn. Açılır menüler vb.)

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

Bu eski bir soru ve buradaki çözümlerin çoğu javascript kullanıyor. O zamandan beri iOS 11.3 piyasaya sürüldü ve artık kapsam üyesini kullanabilirsiniz . Kapsam üyesi, "/"bu kapsam altındaki tüm yolların yeni bir sayfa açmayacağı bir URL'dir .

Kapsam üyesi, bu web uygulamasının uygulama bağlamının gezinme kapsamını temsil eden bir dizedir.

İşte benim örnek:

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

Bununla ilgili daha fazla bilgiyi buradan edinebilirsiniz . Bu işlevi sağlayacak jeneratörü kullanmanızı da tavsiye ederim .

Kapsamı belirtirseniz, her şey Android'e benzer şekilde çalışır, kapsam dışı hedefler Safari'de açılır - PWA'nıza geri düğmesi (durum çubuğundaki küçük).

Davids cevabı ve Richards yorumuna dayanarak bir alan adı kontrolü yapmalısınız. Aksi takdirde, web uygulamanızda diğer web sitelerine bağlantılar da açılır.

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

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

JQuery Mobile kullanıyorsanız, data-ajax = 'false' özelliğini kullanırken yeni pencereyle karşılaşacaksınız. Aslında, ajaxEnabled kapalı ve harici bağlantı, $ .mobile.ajaxEnabled ayarıyla veya target = '' özniteliğine sahip olduğunda bu gerçekleşir.

Bunu kullanarak düzeltebilirsiniz:

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

(Canlı () yöntemi için Richard Poole sayesinde - bind () ile çalışmıyordu)

AjaxEnabled'ı dünya genelinde kapattıysanız, [data-ajax = 'false'] öğesini bırakmanız gerekir.

Bu, aslında jQuery Mobile'a özgü bir sorun olmasını beklediğimden çok uzun sürdü, aslında yeni pencereyi engelleyen Ajax bağlantısıydı.

Bu kod iOS 5 için çalışıyor (benim için çalıştı):

Kafa etiketinde:

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

Aynı pencerede açılmasını istediğiniz bağlantıda:

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

Bu koddan bu yorumu aldım: iphone web uygulaması meta etiketleri

Belki de hedef açıkça "_blank" olarak ayarlandığında bağlantıları yeni pencerede açmaya izin vermelisiniz:

$('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;
    }

});

Çok eksiksiz ve verimli bir tane buldum, çünkü sadece bağımsız WebApp altında çalışıp çalışmadığını kontrol ediyor, jQuery olmadan çalışıyor ve aynı zamanda basit, sadece iOS 8.2 altında test edildi:

Bağımsız Kalın: Mobil Safari'yi açan bağımsız web uygulamalarındaki bağlantıları önleyin

Ayrıca bağlantıyı neredeyse normal olarak da yapabilirsiniz:

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

Ve hash etiketini ve href'i kaldırabilirsiniz, yaptığı her şey görünümü etkiler.

Benim için iOS 6'da işe yarayan şey buydu (rmarscher'in cevabının çok küçük bir uyarlaması):

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

Bu Sean'ın biraz uyarlanmış versiyonu ve geri düğmesini önlüyor

// 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;
    }
  });
}

});

Twitter Bootstrap ve Rails 3 olanlar için

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

Silme bağlantıları hala bu şekilde çalışıyor.

Ben hedef = "_ blank" olanlar dışında, bağımsız web uygulaması modu içindeki tüm bağlantıları açmayı tercih ederim. Elbette jQuery kullanmak.

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

Bir iOS web uygulaması için kullandığım bir çözüm, tüm bağlantıları (CSS tarafından düğmeler olan) form gönderme düğmelerini yaptığımdı. Bu yüzden hedef bağlantıya gönderilen bir form açtım, sonra input type = "send" En iyi yol değil, ama bu sayfayı bulmadan önce anladığım şey buydu.

@ Rmarscher'ın cevabından, burada bulunabilecek bir bower kurulabilir paket oluşturdum :

http://github.com/stylr/iosweblinks

Snippet'i kullanarak bower kullanarak kolayca kurabilirsiniz bower install --save iosweblinks

Kullananlar için JQuery Mobile, yukarıdaki çözümler açılır iletişim kutusunu kırıyor. Bu, bağlantıları web uygulamasında tutar ve pop-up'lara izin verir.

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

Bunu da yapabilir:

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

Bir sayfadaki tüm bağlantılar için kullanacağım şey ...

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

JQuery veya Zepto kullanıyorsanız ...

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

Bu meta etiketi kaldırabilirsiniz.

<meta name="apple-mobile-web-app-capable" content="yes">