Die iPhone Safari Web App öffnet Links in einem neuen Fenster

Ich habe ein Problem mit dem Web, nachdem ich dem Startbildschirm ein Symbol hinzugefügt habe. Wenn das Web über den Startbildschirm gestartet wird, werden alle Links in Safari in einem neuen Fenster geöffnet (und verlieren die Vollbildfunktionalität). Wie kann ich das verhindern? Ich konnte keine Hilfe finden, nur die gleiche unbeantwortete Frage.

Ich habe eine JavaScript-Lösung im iWebKit- Framework gefunden:

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

Die anderen Lösungen hier berücksichtigen entweder keine externen Links (die Sie wahrscheinlich extern in Safari öffnen möchten) oder keine relativen Links (ohne die darin enthaltene Domain).

Das html5 Mobile-Boilerplate-Projekt verweist auf diesen Kern, der eine gute Diskussion zum Thema enthält: https://gist.github.com/1042026

Hier ist der endgültige Code, den sie sich ausgedacht haben:

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

Wenn Sie jQuery verwenden, können Sie Folgendes tun:

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

Dies funktioniert für mich unter iOS 6.1 und mit Bootstrap JS-Links (dh Dropdown-Menüs usw.)

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

Dies ist eine alte Frage, und viele der hier verwendeten Lösungen verwenden Javascript. Seitdem wurde iOS 11.3 veröffentlicht und Sie können jetzt das Scope-Mitglied verwenden . Das Bereichsmitglied ist eine URL, "/"bei der nicht alle Pfade unter diesem Bereich eine neue Seite öffnen.

Das Bereichsmitglied ist eine Zeichenfolge, die den Navigationsbereich des Anwendungskontexts dieser Webanwendung darstellt.

Hier ist mein Beispiel:

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

Sie können auch weitere Informationen lesen Sie hier . Ich empfehle auch die Verwendung des Generators, der diese Funktionalität bietet.

Wenn Sie den Bereich angeben, funktioniert alles wie erwartet, ähnlich wie bei Android. Ziele außerhalb des Bereichs werden in Safari geöffnet - mit einer Zurück-Schaltfläche (die kleine in der Statusleiste) für Ihre PWA.

Basierend auf Davids Antwort und Richards Kommentar sollten Sie eine Domainprüfung durchführen. Andernfalls werden auch Links zu anderen Websites in Ihrer Web-App geöffnet.

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

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

Wenn Sie jQuery Mobile verwenden, wird das neue Fenster angezeigt, wenn Sie das Attribut data-ajax = 'false' verwenden. Tatsächlich geschieht dies immer dann, wenn ajaxEnabled durch einen externen Link, durch eine Einstellung von $ .mobile.ajaxEnabled oder durch ein Attribut target = '' deaktiviert wird.

Sie können dies folgendermaßen beheben:

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

(Danke an Richard Poole für die live () Methode - funktionierte nicht mit bind ())

Wenn Sie ajaxEnabled global deaktiviert haben, müssen Sie [data-ajax = 'false'] löschen.

Es dauerte ziemlich lange, bis ich herausgefunden hatte, dass es sich um ein jQuery Mobile-spezifisches Problem handelte, bei dem es tatsächlich die Ajax-Verknüpfung war, die das neue Fenster tatsächlich verbot.

Dieser Code funktioniert für iOS 5 (er hat bei mir funktioniert):

In der Kopfmarke:

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

In dem Link, den Sie im selben Fenster öffnen möchten:

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

Ich habe diesen Code aus diesem Kommentar erhalten: iPhone Web App Meta-Tags

Vielleicht sollten Sie zulassen, dass Links in einem neuen Fenster geöffnet werden, wenn das Ziel explizit auf "_blank" gesetzt ist:

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

});

Ich habe eine gefunden, die sehr vollständig und effizient ist, da sie überprüft, ob sie nur unter eigenständiger WebApp ausgeführt wird, ohne jQuery funktioniert und auch unkompliziert ist und nur unter iOS 8.2 getestet wurde:

Standalone bleiben: Verhindern Sie Links in eigenständigen Web-Apps, die Mobile Safari öffnen

Sie können auch fast normal verknüpfen:

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

Und Sie können das Hash-Tag und href entfernen, alles, was es tut, wirkt sich auf das Erscheinungsbild aus.

Dies hat bei iOS 6 für mich funktioniert (sehr geringfügige Anpassung der Antwort von 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>

Dies ist eine leicht angepasste Version von Sean, die den Zurück-Button verhinderte

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

});

Für diejenigen mit Twitter Bootstrap und Rails 3

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

Löschlinks funktionieren immer noch so.

Ich ziehe es vor, alle Links im eigenständigen Web-App-Modus zu öffnen, mit Ausnahme derjenigen, deren Ziel = "_ leer" ist. Natürlich mit jQuery.

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

Eine Problemumgehung, die ich für eine iOS-Web-App verwendet habe, war, dass ich alle Links (die Schaltflächen per CSS waren) über Submit-Schaltflächen erstellt habe. Also öffnete ich ein Formular, das auf dem Ziellink gepostet wurde, und gab dann type = "submit" ein. Nicht der beste Weg, aber es ist das, was ich herausgefunden habe, bevor ich diese Seite gefunden habe.

Aus der Antwort von @ rmarscher habe ich ein installierbares Bower- Paket erstellt, das hier zu finden ist:

http://github.com/stylr/iosweblinks

Sie können das Snippet einfach mit der Laube installieren bower install --save iosweblinks

Für diejenigen JQuery Mobile, die diese verwenden , unterbrechen die oben genannten Lösungen den Popup-Dialog. Dadurch bleiben Links in der Webanwendung erhalten und Popups sind möglich.

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

Könnte es auch tun durch:

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

Folgendes würde ich für alle Links auf einer Seite verwenden ...

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

Wenn Sie jQuery oder Zepto verwenden ...

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

Sie können dieses Meta-Tag einfach entfernen.

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