如何使用Turbolinks刷新页面

Question

我知道我可以在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().

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

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

Answer 2

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

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

Answer 3

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

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

请注意，这些字段必须已分配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">。