Turbolinks加载事件在页面加载时不起作用。

Question

Turbolinks加载事件在页面加载时不起作用。

4

我遇到一个问题，与目前默认的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来实现这个功能)

- lucasarruda

你是怎么在Turbolinks中加载的？即页面上的脚本标签在哪里，而且你是否在 <script> 上使用了 async ？ - Dom Christie

我正在以常规的Rails方式加载，使用资产管道。然后我将它从body移动到head，并添加了async。将所有内容加载到一个js文件中（application.js），因此我不会遇到异步问题。 - lucasarruda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dom Christie · Accepted Answer

正如评论中所述，您正在使用async 加载Turbolinks。目前，异步加载Turbolinks的效果并不好。因此，目前最好的建议是从脚本标记中删除async 属性，或者改用defer。

为什么呢？Turbolinks监听第一次加载时的DOMContentLoaded 事件，然后触发turbolinks：load 。如果异步加载，在HTML被解析和DOMContentLoaded 触发之后，可以使脚本完成加载/执行。在这种情况下，turbolinks：load 将不会被触发。

目前还有一个GitHub问题讨论库实施一些可能的解决方案： https://github.com/turbolinks/turbolinks/issues/281。