iPhone Safari Web App otwiera łącza w nowym oknie

Mam problem z siecią po dodaniu ikony do ekranu głównego. Jeśli Internet jest uruchamiany z ekranu głównego, wszystkie łącza otworzą się w nowym oknie w Safari (i utracą funkcjonalność pełnego ekranu). Jak mogę temu zapobiec? Nie mogłem znaleźć żadnej pomocy, tylko to samo pytanie bez odpowiedzi.

Znalazłem rozwiązanie JavaScript w ramach 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
    }
}

Inne rozwiązania tutaj albo nie uwzględniają linków zewnętrznych (które prawdopodobnie chcesz otworzyć zewnętrznie w Safari) lub nie uwzględniają linków względnych (bez domeny w nich).

Projekt html5 mobile-boilerplate zawiera linki do tego streszczenia, które ma dobrą dyskusję na ten temat: https://gist.github.com/1042026

Oto ostateczny kod, który wymyślili:

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

Jeśli używasz jQuery, możesz:

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

To działa dla mnie na iOS 6.1 i z linkami Bootstrap JS (tj. Menu rozwijane itp.)

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

To jest stare pytanie i wiele rozwiązań tutaj wykorzystuje JavaScript. Od tego czasu wydano iOS 11.3 i możesz teraz używać elementu członkowskiego zakresu . Element członkowski zakresu to adres URL podobny do tego, w "/"którym wszystkie ścieżki w tym zakresie nie otwierają nowej strony.

Element członkowski zakresu to ciąg, który reprezentuje zakres nawigacji w kontekście aplikacji tej aplikacji sieci Web.

Oto mój przykład:

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

Możesz również przeczytać więcej na ten temat tutaj . Polecam również użycie generatora, który zapewni taką funkcjonalność.

Jeśli określisz zakres, wszystko będzie działać zgodnie z oczekiwaniami, podobnie jak w Androidzie, miejsca docelowe poza zakresem zostaną otwarte w Safari - z przyciskiem Wstecz (małym na pasku stanu) do twojego PWA.

Na podstawie odpowiedzi Davidsa i komentarza Richardsa należy przeprowadzić kontrolę domeny. W przeciwnym razie w Twojej aplikacji internetowej zostaną otwarte również linki do innych witryn internetowych.

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

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

Jeśli używasz jQuery Mobile, zobaczysz nowe okno, używając atrybutu data-ajax = 'false'. W rzeczywistości stanie się to za każdym razem, gdy ajaxEnabled zostanie wyłączony, będąc przez i zewnętrznym łączem, przez ustawienie $ .mobile.ajaxEnabled lub przez posiadanie atrybutu target = ''.

Możesz to naprawić, używając tego:

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

(Podziękowania dla Richarda Poole'a za metodę live () - nie działało z bind ())

Jeśli globalnie wyłączyłeś ajaxEnabled, musisz porzucić [data-ajax = 'false'].

Zajęło mi to dość dużo czasu, aby się zorientować, ponieważ spodziewałem się, że będzie to problem specyficzny dla jQuery Mobile, podczas gdy w rzeczywistości to linkowanie Ajax faktycznie blokowało nowe okno.

Ten kod działa na iOS 5 (działał dla mnie):

W tagu head:

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

W linku, który chcesz otworzyć w tym samym oknie:

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

Mam ten kod z tego komentarza: metatagi aplikacji internetowej na iPhone'a

Może powinieneś zezwolić na otwieranie linków w nowym oknie, gdy cel jest jawnie ustawiony na „_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;
    }

});

Znalazłem taki, który jest bardzo kompletny i wydajny, ponieważ sprawdza, czy działa tylko pod samodzielną aplikacją internetową, działa bez jQuery i jest również prosty, właśnie przetestowany pod iOS 8.2:

Pozostań samodzielny: Blokuj łącza w samodzielnych aplikacjach internetowych otwierających Mobile Safari

Możesz też prawie normalnie tworzyć linki:

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

Możesz też usunąć hash tag i href, wszystko, co robi, wpływa na wygląd.

Oto, co zadziałało na mnie na iOS 6 (bardzo nieznaczna adaptacja odpowiedzi rmarschera):

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

Jest to nieco zaadaptowana wersja Seana, która blokowała przycisk Wstecz

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

});

Dla tych z Twitter Bootstrap i Rails 3

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

Usuwanie linków nadal działa w ten sposób.

Wolę otwierać wszystkie linki w trybie samodzielnej aplikacji internetowej z wyjątkiem tych, które mają target = "_ blank". Oczywiście przy użyciu jQuery.

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

Jednym z obejść, które zastosowałem w aplikacji internetowej na iOS, było to, że wszystkie linki (które były przyciskami w CSS) tworzyłem przyciski przesyłania. Więc otworzyłem formularz, który wysłał do linku docelowego, a następnie input type = "submit" Nie jest to najlepszy sposób, ale to jest to, co odkryłem, zanim znalazłem tę stronę.

Utworzyłem pakiet instalowalny bower z odpowiedzi @ rmarscher, którą można znaleźć tutaj:

http://github.com/stylr/iosweblinks

Możesz łatwo zainstalować fragment za pomocą altany za pomocą bower install --save iosweblinks

W przypadku użytkowników JQuery Mobilepowyższe rozwiązania powodują przerwanie wyskakującego okna dialogowego. Zachowa to linki w aplikacji internetowej i pozwoli na wyświetlanie wyskakujących okienek.

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

Można to również zrobić poprzez:

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

Oto, czego użyłbym dla wszystkich linków na stronie ...

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

Jeśli używasz jQuery lub Zepto ...

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

Możesz po prostu usunąć ten metatag.

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