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

Question

我对 turbolinks 有疑问。当我在浏览器中单击 'back' 按钮时，会附加一个页脚。

在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 所说，对于特定的 dom 元素或类似情况下的页面，您应该将 Turbolikns.clearCache() 放入 .js file 中。在我的例子中，我以这种方式添加了以下代码：

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

通过清除缓存（如），您将失去 Turbolinks 提供的一些性能优势。

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

加载第 1 页
页脚是从其他来源加载的
用户点击 link 进入第 2 页
Turbolinks 缓存页面
加载第 2 页
用户按下返回
Turbolinks 加载缓存页面（带页脚）
页脚再次从其他来源加载:/

如果您在每次加载页面时将 HTML 添加到页面，惯用的方法是 "teardown" 任何脚本对 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

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

Turbolinks, Rails, back button, footer from other source

javascript

ruby-on-rails

caching

coffeescript

turbolinks