Come aprire Safari da una WebApp in iOS 7

Nelle versioni precedenti di iOS, i tag avrebbero aperto Mobile Safari e dovevi intercettarli per rimanere all’interno dell’app Web (una pagina HTML che è stata salvata nella schermata home dall’utente).

A partire da iOS 7, tutti i collegamenti restano all’interno di WebApp. Non riesco a capire come farlo aprire Safari, quando lo voglio davvero.

Ho provato a utilizzare window.open e a target="_blank" ma nessuno dei due funziona.

Ecco un esempio. https://s3.amazonaws.com/kaontest/testopen/index.html

Se lo salvi nella schermata iniziale in iOS 6, il collegamento apre Safari. Ma in iOS 7, non è così.

Nota che questa è la domanda OPPOSTA che tutti in genere chiedono (“come NON aprire Safari”). Quel comportamento sembra essere il nuovo default, e non riesco a capire come recuperare il vecchio comportamento!

Avere un tag di ancoraggio con target _blank funzionerà in iOS 7.0.3 ma utilizzando window.open non funzionerà e rimarrà aperto nella webview in 7.0.3:

 window.open('http://www.google.com/', '_blank'); 

Aggiornamento 23/10/2013: risolto in iOS 7.0.3. Aggiungi un attributo target = “xxx” ai tuoi link per farlo. Funziona anche con mailto: e amici.

Questo è un bug in iOS 7.0, 7.0.1 e 7.0.2 e non esiste un modo noto per farlo.

È una regressione dalle versioni precedenti di iOS, dove i collegamenti che si aprono in Safari funzionano perfettamente. Sembra che faccia parte di un gruppo di problemi che ruotano attorno agli URL di apertura, senza alcuno schema di URL esterni (ad esempio “mailto:” non funziona neanche).

I soliti sospetti di aggirare un problema come questo purtroppo non funzionano (per esempio usando un modulo e inviandolo con una destinazione di “_new”).

Ci sono altri gravi problemi, come l’avviso e la conferma che i dialoghi modali non funzionano affatto.

Potrebbe essere utile inviare questi come bug a Apple, http://bugreport.apple.com

Questo è un problema noto negli ultimi due mesi di beta. Non ci sono problemi di lavoro, e da quello che posso dire che Apple ha taciuto su eventuali ETA sulle correzioni, o addirittura ha riconosciuto che si tratta di un bug. Le segnalazioni di bug sono state inviate, ma non aggiornate / risposte a.

Altro: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

AGGIORNAMENTO Volevo solo far sapere a chiunque seguisse che iOS 7.0.3 sembra risolvere il problema. Ho mantenuto le app web standalone salvate per i test e l’aggiornamento rilasciato oggi ha ripristinato la funzionalità di collegamento / app esterna. Quindi ho aggiornato il mio codice per far sapere ai clienti di aggiornare i loro telefoni anziché eliminare e salvare l’app web.


Stavo per aggiungere un commento ma a quanto pare è troppo lungo.

Apple ha posto le basi per un mondo WebApp quando ha permesso di salvare le app web chromeless nella schermata principale del dispositivo. Questo “bug” sembra un importante passo indietro. Non sembra che Apple abbia lasciato un bug simile a un gapping in una versione finale. Almeno non uno che, una volta che se ne accorgano, non dichiarano pubblicamente che stanno lavorando a una correzione per questo come hanno fatto con i bypass della schermata di blocco. Non posso fare a meno di sentirlo intenzionalmente, anche se non sembra esserci una ragione chiara per cui.

Per gli sviluppatori che si occupano di questo problema, l’unica soluzione che ho trovato è stata

1 °) Imposta il meta tag apple-mobile-web-app-in grado di “no” – questo impedisce agli utenti futuri di affrontare il problema

2 °) Aggiornato il codice nella nostra webapp per cercare “standalone” e iOS versione 7+. Quando le condizioni sono soddisfatte, ho offerto un popup che ha indicato il problema e aggiunto un link a quella pagina e ho chiesto agli utenti la loro perdonanza e ho chiesto loro di copiare il link e incollarlo nel safari.

Ho avvolto il link in tag edge-to-edge con interruzioni di riga sopra e sotto per semplificare un po ‘il processo di copia e incolla dell’URL.

iOS v7.0.3 rilasciato il 22/10/2013 risolve il problema.

Per ora ho trovato due soluzioni a questo problema, che ovviamente utilizzavano preventDefault sui collegamenti esterni.

Se stai collegando ad un altro sito web o qualcosa da scaricare, l’unica opzione che vedo è di avvisare ironicamente l’utente di tenere il dito sul link per ottenere il prompt del callout touch. Poi di nuovo, a seconda che si tratti di un sito Web o di un PDF, chiedere loro di copiare il collegamento o, nel caso di un PDF, aggiungerlo alla loro lista di lettura. Dal momento che anche le modali di avviso e conferma sono interrotte, dovrai implementare le tue notifiche modali. Se già lo hai, non dovrebbe essere un problema.

Aggiornamento [2013-10-25] Apparentemente è stato corretto in iOS 7.0.3 e collegamenti aperti in Safari …

Modifica [2013-10-05] Ecco praticamente cosa uso con un modal UI jQuery

 // iOS 7 external link polyfill $('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]').on('click', function(e) { if (navigator.standalone && /iP(hone|od|ad) OS 7/.test(navigator.userAgent)) { e.preventDefault(); e.stopPropagation(); var href = $(this).attr('href'); var $dialog = $('
') .html('

iOS 7 prevents us from opening external links in Safari, you can continue to the address and risk losing all navigation or you can copy the address to your clipboard by holding your finger on the link for a few seconds.

https://stackoverflow.com/questions/18879631/how-to-open-safari-from-a-webapp-in-ios-7/' + href + '

') .appendTo('body') .dialog({ title: 'External link', modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); } });

L’altra soluzione alternativa è usare ajax o iframe per caricare il contenuto esterno, ma a meno che non si disponga di un buon sotto-browser o di qualcosa nella tua app sembrerà impreciso. Ecco qualcosa in questo senso.

 // iOS 7 external link polyfill if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent) && window.navigator.standalone) { $('a[rel=external], a[href$=".pdf"]').on('click', function(e) { e.preventDefault(); e.stopPropagation(); var link = this; var href = $(link).attr('href'); var frameContainer = $('
').css({ position: 'absolute', left: 10, top: $(link).position().top, opacity: 0, overflow: 'scroll', '-webkit-overflow-scrolling': 'touch', height: 520, transition: 'opacity .25s', width: 300 }); var iosFrame = $('') .attr('src', href) .css({ height: 5000, 'max-width': 1024, width: 1024, overflow: 'scroll !important', '-webkit-overflow-scrolling': 'touch !important' }); var iosFrameClose = $('').css({ position: 'absolute', left: -10, top: $(link).position().top - 20, 'text-shadow': '1px 1px 1px #000', transition: 'opacity .25s', opacity: 0, '-webkit-transform': 'translate3d(0, 0, 0)', width: '3em', height: '3em' }).on('click', function(e) { e.preventDefault(); setTimeout( function() { $(frameContainer).remove(); $(iosFrameClose).remove(); }, 250); }); iosFrame.appendTo(frameContainer); frameContainer.appendTo('body'); iosFrameClose.appendTo('body'); iosFrame.contents().css({ '-webkit-transform': 'translate3d(0, 0, 0)' }); // Show this thing setTimeout( function() { $(frameContainer).css({ opacity: 1 }); $(iosFrameClose).css({ opacity: 1 }); }, 1); }); }
 window.open('http://www.google.com/'); // stays in web app view Click Here // opens in safari 

Se si desidera aprire Safari, ma l’utilizzo di un tag di ancoraggio come questo non è ansible per qualsiasi motivo, la soluzione JavaScript a questa domanda si aprirà anche in Safari .

Sembra sospettosamente un bug intenzionale per limitare la capacità delle app Web di pubblicare annunci pubblicitari. Forse puoi provare ad aprire la nuova pagina in un iframe.

EDIT: Scusa, ho letto male il tuo problema originale. Questa soluzione era per l’apertura di un sito Web esterno. Basic Un tag href utilizzato per lavorare nei link di apertura e ha smesso di funzionare in iOS7. Questo era l’unico modo in cui potevo farlo aprire un collegamento esterno.


Ecco come ho avuto modo di lavorare con una webapp salvata sul desktop in iOS7.

 function openpage() { window.open('http://www.yourlinkhere.com', '_blank'); } 

 LINKED TEXT 

Il problema però è che sembra ignorare l’opzione target e la apre nella stessa webapp desktop a schermo intero e non c’è modo di tornare indietro che posso vedere.

 window.open('http://www.google.com/', '_system'); 

questo aprirà l’applicazione nativa di Safari anche sull’ultima versione di iOS …

Codifica felice !!