每次在 Rails 5 个应用中加载 turbolinks 时执行 JS

Question

我想在每次加载 turbolinks（即加载页面）时执行几行 js，而不是缓存中的 js，但想强制执行运行它在 turbolinks 加载事件之前，每次。这可能吗？

我试图通过隐藏 html 正文并在 app.js.coffee

中执行此操作来摆脱 FOUC

$(document).on 'turbolinks:load', ->
    document.body.style.visibility = 'visible'

但是 FOUC 在第 3 次或第 4 次重新加载页面后开始启动。

要查看实际效果，here 是 link 网站。

Answer 1

Turbolinks 仅在使用该页面上的链接时加载，而不是在刷新页面或通过 url 导航时加载。如果你想在页面加载时运行 js 然后使用 $(document).ready(function() { executable js here });

Answer 2

因此，FOUC 与 turbolinks 的结合可能会非常令人恼火。我们最终修复它的方法是用一个内联麦粒肿隐藏整个主体，并在主体内添加一个脚本标签：

<script type="text/javascript">
        document.body.style.visibility = 'visible'
</script>

这确保了当 turbolinks 运行时它只加载 HTML 的正文，因此在正文中有一个脚本运行确保 js 运行每个有 turbolinks 负载的时间。

Execute JS every time on the event of turbolinks load in Rails 5 app