Turbolinks、Rails、后退按钮、来自其他来源的页脚

Question

我对 turbolink 有疑问。当我在浏览器中单击“后退”按钮时，会附加一个页脚。

在application.html.slim:

doctype html
html
  head
    title
      - unless content_for(:title).present?
        | Some text...
      - else
        == yield :title
    meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    - if admin_admin_signed_in?
      = stylesheet_link_tag    'cms/application', media: 'all', 'data-turbolinks-track': 'reload'
      = javascript_include_tag 'cms/application', 'data-turbolinks-track': 'reload'

我从其他来源 (application.coffee) 加载页脚：

$(document).on 'turbolinks:load', ->
    $('footer').get(0).innerHTML = ''
    for src in ['//other_site.com/goc/us/other_site.com/responsive.js', '//other_site.com/footer-builder.js']
      s = document.createElement('script')
      s.async = true
      s.src = src
      document.getElementsByTagName('head')[0].appendChild s

提前感谢您的关注！

Answer 1

正如@uzaif 所说，您应该将Turbolikns.clearCache() 放入您的.js file 以用于特定的dom 元素，甚至在类似情况下的页面。就我而言，我以这种方式添加了以下代码和平：

application.coffee:

$(document).on 'turbolinks:load', ->
  $('footer').get(0).innerHTML = ''
  for src in ['//other_site.com/goc/us/other_site.com/responsive.js', '//other_site.com/footer-builder.js']
    s = document.createElement('script')
    s.async = true
    s.src = src
    document.getElementsByTagName('head')[0].appendChild s
  Turbolikns.clearCache()

请记住，它会降低页面加载速度，因此请确保对应用程序进行分析

Answer 2

通过清除缓存（如 https://stackoverflow.com/a/44398711/783009），您将错过 Turbolinks 提供的一些性能优势。

@uzaif 是正确的，因为页面正在被缓存。这是正在发生的事情：

1. 第 1 页加载
2. 页脚是从其他来源加载的
3. 用户点击第 2 页的链接
4. Turbolinks 缓存页面
5. 第 2 页加载
6. 用户按返回键
7. Turbolinks 加载缓存页面（带有页脚）
8. 页脚再次从其他来源加载：/

如果您在每次页面加载时都向页面添加 HTML，惯用的方法是“拆除”任何脚本对 turbolinks:before-cache 的影响。在没有看到页脚脚本做什么的情况下为此编写代码有点棘手，但总体思路是：

$(document).on 'turbolinks:load', ->
  # load your footer…

$(document).on 'turbolinks:before-cache', ->
  # teardown your footer

有关这方面的更多信息，请参阅此处：https://github.com/turbolinks/turbolinks#preparing-the-page-to-be-cached

或者，如果页脚在页面加载之间没有改变，您可能希望只加载一次内容（例如在$(document).ready），然后在页面加载之间保持它。为此，您需要为页脚提供一个 ID 和一个 data-turbolinks-permanent 属性。只要带有 ID 的页脚在来自服务器的每个响应中，页脚内容就会被维护。有关这方面的更多信息，请参见此处：https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads