2016-02-25 22 views
16

Ho una pagina Web che utilizza history.pushState con identificatori di frammento (ad esempio #Heading1) e il metodo animate di jQuery per navigare all'interno del documento.Chrome su iOS; indietro/avanti non funziona con history.pushState?

Questo è come naviga verso una posizione nel documento:

$('nav a').click(function(e){ 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    history.pushState(null, null, href); 
    $('#address').val(location.pathname + href); 

    $('html, body').animate({ 
    'scrollTop': $(href).offset().top + 'px' 
    }); 

Utilizzo di Google Chrome su iOS, l'indirizzo viene aggiornato come previsto e l'animazione di scorrimento funziona bene, ma i/pulsanti avanti indietro don' t vai ai tag identificati.

Devo notare che quando si utilizzano i pulsanti Indietro/Avanti, l'URL nella barra degli indirizzi è modificato. Semplicemente non va al tag identificato.

Ho visto questo problema solo con Google Chrome su iOS; sia iPhone che iPad.

Ho creato un Pen a CodePen con un sottoinsieme del mio codice che deve dimostrare il problema: http://codepen.io/Ghodmode/pen/YqKGga


Aggiornamento:
Ho aggiornato la mia penna per fare è un po 'più facile da testare su un iPhone/iPad. E 'probabilmente anche meglio usare la vista di debug: http://s.codepen.io/Ghodmode/debug/YqKGga



Aggiornamento 2:
ho creato un'altra pagina in CodePen che dovrebbero dimostrare il problema. Questa volta, senza jQuery: http://s.codepen.io/Ghodmode/debug/jqOqpq

Non sono stato in grado di testare questo ancora perché non ho accesso diretto a iPhone/iPad, ma davvero non credo che il problema abbia nulla a che fare con jQuery.


Funziona bene su:

  • Safari su iPhone/iPad
  • Google Chrome su Android
  • Mozilla Firefox su Android
  • Google Chrome su Windows
  • Mozilla Firefox su Windows
  • Internet Explorer su Windows

Probabilmente dovrei notare che non ho personalmente alcun dispositivo iOS per testarlo, ma ho un tester affidabile che mi invia video e screenshot di qualsiasi problema.

Poiché l'animazione funziona come previsto, non sembra un problema jQuery.

+0

Non riesco a trovare nulla di sostanziale su questo, ma sono passato dalla ricerca di _chrome ios hashchange_ a _ios webview hashchange_ poiché Chrome su iOS è solo un'interfaccia utente racchiusa in UIWebView. – Vince

+3

[Questo bug report Chromium] (https://bugs.chromium.org/p/chromium/issues/detail?id=559122) sembra confermare che Chrome su iOS non attiva l'evento 'hashchange' quando il pulsante Indietro viene cliccato, ma non riesco a immaginare come così poche persone abbiano notato questo. – Vince

+0

Qualche aggiornamento su questo? Un anno dopo, vedo lo stesso problema, non posso modificare la cronologia (/ pulsante indietro) utilizzando Google Chrome su iOS, funziona su qualsiasi altra cosa, tra cui Safari su iOS. – adrianTNT

risposta

1

iOS ha pochi bug con l'API di cronologia HTML5.

Hai provato:

window.addEventListener("popstate", function(e) { 
    window.location.href = location.href; 
}); 

Questo plugin può essere di qualche utilità (anche per lo sfondo lettura) History.js. Risolve i problemi di compatibilità cross-browser e fornisce anche un fallback hash HTML4 opzionale se desideri

Problemi correlati