如何使用 Turbolinks 刷新页面答案

【问题标题】：How to refresh a page with Turbolinks如何使用 Turbolinks 刷新页面
【发布时间】：2016-09-18 10:12:13
【问题描述】：

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

Turbolinks.visit(location.toString());

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

 window.location.reload()

【问题讨论】：

标签： ruby-on-rails ruby turbolinks

【解决方案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 缓存指令：

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

【讨论】：

此解决方案在 Hotwire Turbo 中不起作用，因为在执行滚动 (github.com/hotwired/turbo/blob/…) 之前调用了 "turbo:load" 处理程序 (github.com/hotwired/turbo/blob/…)。我的 hack-fix 是将处理程序包装到 setTimeout() 中，因此处理程序将在稍后实际执行，就像 Turbolinks 一样。代码：if (scrollPosition) { setTimeout(() => { window.scrollTo.apply(window, scrollPosition); scrollPosition = null }); }})

【解决方案2】：

已经有一段时间了，不确定您是否还需要解决方案。你可以试试这个，它在加载页面内容之前和之后禁用/启用滚动：

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

【讨论】：

【解决方案3】：

我的答案基于Dom Christie's answer，在重新加载后恢复焦点并在渲染之前获取滚动位置。

在渲染新页面之前存储当前滚动位置和活动字段项，然后在渲染之后，滚动到该存储位置并恢复焦点。将存储的滚动位置和 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”属性结合使用。我也使用<meta name="turbolinks-cache-control" content="no-preview">。

【讨论】：