Turbolinks加载事件不适用于页面加载

Question

我对当前默认的turbolinks推荐加载事件有疑问：

document.addEventListener('turbolinks:load', function() {
  …
});

当页面加载时，这不会在Safari上触发。因此，我将Turbolinks.dispatch("turbolinks:load");添加到application.js。

似乎工作正常。但是在Chrome上，它会自动触发，因此最终发生的事情是turbolinks:load事件的双重攻击。

我的第一个解决方法是仅在非Chrome浏览器上启动turbolinks:load。

但不知何故，即使在Chrome上，某些观看次数也不会自动触发turbolinks:load。所以我最终也不得不在具体的观点上解决它。

我找到的最终解决方案是使用：

$(document).on('ready turbolinks:load', function() {
  …
});

这似乎解决了所有问题，因为它会在首页加载或重新加载以及单击链接时触发。它也会在Chrome和Safari上启动。

有更好的方法来解决这个问题吗？

文档说第一个版本是正确的，但似乎并非如此。

我错过了什么吗？

（注意：使用jQuery对我来说不是一个缺点，我知道我可以通过几个document.addEventListener来实现它

Answer 1

如评论中所述，您正在使用async加载Turb​​olinks。 Turbolinks当前异步加载时效果不佳。因此，目前最好的建议是从脚本代码中删除async属性，或使用defer代替。

为什么？

Turbolinks会在第一次加载时侦听DOMContentLoaded事件，然后触发turbolinks:load。通过异步加载，脚本在解析HTML并DOMContentLoaded触发后完成加载/执行的可能性。在这种情况下，turbolinks:load将不会被解雇。

目前存在一个GitHub问题，需要讨论一些可能的解决方案，以便实现该库：https://github.com/turbolinks/turbolinks/issues/281