So aktualisieren Sie eine Seite mit Turbolinks

Question

Ich verstehe, dass ich den folgenden Code auf Turbolinks 5 aufrufen kann, aber es ändert die Scroll-Position. Gibt es eine Möglichkeit, Turbolinks aufzurufen, um die Seite zu aktualisieren und die Bildlaufposition nicht zu ändern?

Turbolinks.visit(location.toString()); 

Das wird tun, was ich will, aber hatte gehofft, Turbolinks

window.location.reload() 

Answer 1

Es ist bene eine Weile zu benutzen, nicht sicher, ob Sie noch eine Lösung brauchen würde. Sie können dies versuchen, die aktiviert/deaktiviert Scrollen vor und nach dem Laden Seiteninhalt:

Turbolinks.enableTransitionCache(true); 
Turbolinks.visit(location.toString()); 
Turbolinks.enableTransitionCache(false); 

Answer 2

Speichern Sie die aktuelle Bildlaufposition vor visit aufrufen, dann, wenn die Seite geladen wird, blättern Sie zu der gespeicherten Position. Durch das Zurücksetzen der gespeicherten Bildlaufposition auf null wird sichergestellt, dass die nachfolgenden Seitenladungen nicht zu einer alten Position rollen. Eine mögliche Implementierung könnte sein:

var reloadWithTurbolinks = (function() { 
    var scrollPosition 

    function reload() { 
    scrollPosition = [window.scrollX, window.scrollY] 
    Turbolinks.visit(window.location.toString(), { action: 'replace' }) 
    } 

    document.addEventListener('turbolinks:load', function() { 
    if (scrollPosition) { 
     window.scrollTo.apply(window, scrollPosition) 
     scrollPosition = null 
    } 
    }) 

    return reload 
})() 

Dann können Sie reloadWithTurbolinks() nennen.

Um die Seite zu verhindern, dass Flimmern, wie es von oben in die gewünschte Position scrollt, fügen Sie die no-preview Richtlinie Cache in der head Seite:

<meta name="turbolinks-cache-control" content="no-preview"> 

Answer 3

ist meine Antwort basierend auf Dom Christie's answer, mit restaurierten Fokus nach dem Neuladen und die scrollPosition vor dem Rendern abrufen.

Speichern Sie die aktuelle Bildlaufposition und das aktive Feldelement, bevor Sie die neue Seite rendern, und scrollen Sie nach dem Rendern zu dieser gespeicherten Position und stellen Sie den Fokus wieder her. Durch das Zurücksetzen der gespeicherten Bildlaufposition und focusId auf null wird sichergestellt, dass die nachfolgenden Seitenladevorgänge nicht zu einer alten Position/einem alten Fokus verschoben werden.

Beachten Sie, dass den Feldern Ids zugewiesen werden müssen, um den Fokus wiederherzustellen.

var reloadWithTurbolinks = (function() { 
     var scrollPosition; 
     var focusId; 

     function reload() { 
      Turbolinks.visit(window.location.toString(), {action: 'replace'}) 
     } 

     document.addEventListener('turbolinks:before-render', function() { 
      scrollPosition = [window.scrollX, window.scrollY]; 
      focusId = document.activeElement.id; 
     }); 
     document.addEventListener('turbolinks:load', function() { 
      if (scrollPosition) { 
       window.scrollTo.apply(window, scrollPosition); 
       scrollPosition = null 
      } 
      if (focusId) { 
       document.getElementById(focusId).focus(); 
       focusId = null; 
      } 
     }); 
     return reload; 
    })(); 

Dann können Sie es so nennen:

setInterval(function() { 
     reloadWithTurbolinks(); 
}, 3000); 

ich es mit dem auf dem Formular 'Daten-turbolinks-permanenten' Attribute kombiniert. Ich benutze auch <meta name="turbolinks-cache-control" content="no-preview">.