我是第一次使用Turbolinks，而不是Rails(我使用的是Django(。
繁殖
https://glitch.com/edit/#!/join/dc628a17-3ccd-47b4-9921-8fb332aaebb1
源代码
-
index.html：<html> <head> <script defer src="/js/index.js"></script> </head> <body> Text and NO <script></script>! </body> </html> -
about.html：<html> <head> <script defer src="/js/index.js"></script> <script defer src="/js/about.js"></script> </head> <body> Text and NO <script></script>! </body> </html> -
index.js：import Turbolinks from 'turbolinks' Turbolinks.start() -
about.js：function drawChart() { console.log("I will drawChart() here") } // drawChart() <--- this is commented on purpose here, with this it works! document.addEventListener('turbolinks:load', drawChart)
问题所在
如果我从第/index页开始，然后通过链接导航到/about什么也没发生！
如果我现在回到/index我可以在控制台中看到日志：I will drawChart() here.所以听众正在工作。
如果我从/about启动(刷新(，它会在控制台中打印消息，以便侦听器turbolinks:load在刷新时drawChart()运行函数。
我的期望和我做了什么
我也需要调用函数drawChart()在第一次导航中也发生/about。
所以我想在文件中使用直接调用(drawChart()，如您所见，在源代码中对此进行了注释(并且它有效。
但我认为这不是好方法，特别是因为如果我继续/about刷新页面，它会调用两次！
在我看来，这太笨拙了。
不是？
哇��
- 同样的问题，但他的解决方案对我不起作用：https://candland.net/rails/2019/03/13/rails-turbolinks-not-firing-js-on-load.html
感谢您的工作！
我认为问题是turbolinks:load在加载about.js之前被触发。当Turbolinks渲染一个新页面时，它会将任何不存在的脚本添加到<head>，然后触发生命周期事件，例如turbolinks:load.在这种情况下，它不会等待每个script加载后再触发turbolinks:load。以下是可能正在发生的事情：
index.html负载与index.js- 导航到
about.html - 涡轮链接合并
about.js about.js开始下载- 涡轮链路完成生命周期并触发
turbolinks:load about.js完成下载并执行
因为turbolinks:load已经在 5 中触发了，所以在下一次加载之前不会调用about.js中的回调。
您可能想尝试在about.html<body>的底部包含大约.js。不需要turbolinks:load侦听器。
或者，尝试将JS包含在单个文件中，也许可以使用页面的内容来确定何时调用drawChart。例如：
import Turbolinks from 'turbolinks'
// about.js content here
Turbolinks.start()
document.addEventListener('turbolinks:load', function () {
var chart = document.getElementById('chart')
if (chart) drawChart()
})