如何使用Turbolinks刷新页面

据我所知，我可以在Turbolinks 5上调用以下代码，但它会更改滚动位置。 有没有办法调用Turbolinks来刷新页面而不是更改滚动位置？

Turbolinks.visit(location.toString()); 

这将做我想要的，但希望使用Turbolinks

  window.location.reload() 

Answer 1

在调用visit之前存储当前滚动位置，然后在页面加载时滚动到该存储位置。 将存储的滚动位置重置为null可确保后续页面加载不会滚动到旧位置。 一种可能的实现可能是：

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

然后你可以调用reloadWithTurbolinks() 。

要防止页面从顶部滚动到所需位置时闪烁，请在页面head添加no-preview缓存指令：

Answer 2

这需要一段时间，不确定您是否还需要解决方案。 您可以尝试此操作，在加载页面内容之前和之后禁用/启用滚动：

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

Answer 3

我的答案是基于Dom Christie的答案 ，重新加载后恢复焦点并在渲染之前获得scrollPosition。

在渲染新页面之前存储当前滚动位置和活动字段项目，然后在渲染后，滚动到该存储位置并恢复焦点。 将存储的滚动位置和focusId重置为null可确保后续页面加载不会滚动到旧位置/焦点。

请注意，字段必须已分配ID才能恢复焦点。

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

然后你可以像这样调用它：

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

我将它与表单上的’data-turbolinks-permanent’属性结合起来。 我还使用 。