gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 20:54:20 30 4
gpt4 key购买 nike

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

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

});

发生的事情是当页面加载时,这不会在 Safari 上触发。因此,我将 Turbolinks.dispatch("turbolinks:load"); 附加到 application.js

它似乎工作正常。但在 Chrome 上,它确实会自动触发,所以它最终发生的是 turbolinks:load 事件的双重触发。

我的第一个修复是仅在非 Chrome 浏览器上触发 turbolinks:load

但不知何故,即使在 Chrome 上,某些 View 也不会自动触发 turbolinks:load。所以我最终也不得不在特定 View 上触发它。

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

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

});

这似乎解决了所有问题,因为它会在第一页加载或重新加载时以及我单击链接时触发。它还会在 Chrome 和 Safari 上触发。

有没有更好的方法来处理这个问题?

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

我错过了什么吗?

(注意:使用 jQuery 对我来说不是缺点,我知道我可以用几个 document.addEventListener 来实现它)

最佳答案

如评论中所述,您正在使用 async 加载 Turbolinks。 Turbolinks 目前在异步加载时效果不佳。所以目前最好的建议是从脚本标签中删除 async 属性,或者使用 defer 代替。

为什么?

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

目前有一个 GitHub 问题来讨论图书馆实现的一些可能的解决方案:https://github.com/turbolinks/turbolinks/issues/281

关于javascript - Turbolinks 加载事件在页面加载时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50120824/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com