ターボリンクでページを更新する方法

Question

Turbolinks 5に次のコードを呼び出すことができますが、スクロール位置が変更されることを理解しています。ターボリンクを呼び出してページを更新し、スクロール位置を変更しない方法はありますか？

Turbolinks.visit(location.toString()); 

これは私がやりたいだろうが、それは、しばらくBENEあなたはまだ解決策が必要になるかどうかわからないのですTurbolinks

window.location.reload() 

Answer 1

を使用することを期待していました。あなたは前にスクロールし、ロードページコンテンツの後に有効/無効にされ、これを試すことができます。

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

Answer 2

ストア現在のスクロール位置ページのロード時、その後、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()を呼び出すことができます。

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

Answer 3

私の答えは、リロード後に復元された焦点を当てた、Dom Christie's answerに基づいています。ページのheadにno-previewキャッシュディレクティブを追加し、それが所望の位置まで上からスクロールするとちらつきからページを防ぐために

レンダリングの直前にscrollPositionを取得します。

新しいページをレンダリングする前に現在のスクロール位置とアクティブなフィールド項目を格納し、次にレンダリングした後、その格納位置までスクロールしてフォーカスを復元します。保存されたスクロール位置とfocusIdをnullにリセットすることで、後続のページ読み込みが古い位置にスクロールしないようにします。/ Focus。

フォーカスを回復するには、フィールドにIDを割り当てる必要があります。私は、フォーム上のデータ・turbolinks-永久 '属性とそれを組み合わせる

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

：

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

次に、あなたがこのようにそれを呼び出すことができます。私も<meta name="turbolinks-cache-control" content="no-preview">を使用します。