在加载 <script> 标记之前等待 turbolinks 加载答案

【问题标题】：Wait for turbolinks to load before loading a <script> tag在加载 <script> 标记之前等待 turbolinks 加载
【发布时间】：2021-06-25 17:19:50
【问题描述】：

我在another post遇到了一个无法解决的问题

简而言之，它的问题是 DataTables 在我刷新页面之前不会加载。所以我想通过在<script> 标签中添加一个turbolinks:load 事件监听器来解决它，以便在turbolinks 加载后加载CDN。有可能吗？

这是我genes.html.erb末尾的代码

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script type="text/javascript">
document.addEventListener("turbolinks:load", function () {
  $('#myTable').DataTable();
 
});
</script>

我在想这样的事情：

<script>
document.addEventListener("turbolinks:load", function () {
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
})
</script>

<script type="text/javascript">
document.addEventListener("turbolinks:load", function () {
  $('#myTable').DataTable();
 
});
</script>

但显然，一个有效的。

我的尝试的控制台日志：

Uncaught SyntaxError: Unexpected token '<'
genes:162 Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (genes:162)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872
(anonymous) @ genes:162
./node_modules/turbolinks/dist/turbolinks.js.e.dispatch @ turbolinks.js:75
r.notifyApplicationAfterPageLoad @ turbolinks.js:994
r.pageLoaded @ turbolinks.js:948
(anonymous) @ turbolinks.js:872

试过Pointy的回复

将此代码添加到我的gene.html.erb：

<script>
document.addEventListener("turbolinks:load", function () {
  var script = document.createElement('script');
  script.onload = function() {
    alert("Script loaded and ready");
  };
  script.src = "https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js";
  document.getElementsByTagName('head')[0].appendChild(script);
});
</script>

<script type="text/javascript">
document.addEventListener("turbolinks:load", function () {
  $('#myTable').DataTable();
 
});
</script>

但它不起作用。尽管收到来自 localhost:3000 的警报说 Script loaded and ready，但 DataTables 没有显示 - 控制台日志：

Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (genes:168)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

我也尝试将脚本添加到application.js webpacker（同样的错误）

编辑 4？：

<script type="text/javascript" charset="utf8">
 var script = document.createElement('script');
 script.onload = function() {
   alert("Script loaded and ready");
 };
 script.async = true;
 script.src = "https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js";

// MODIFIED THE SCRIPT TO ADD IT TO "BODY" INSTEAD, as in the console, the "working" version has it in the body tag
 document.getElementsByTagName('body')[0].appendChild(script);
 </script>
<script type="text/javascript">
document.addEventListener("turbolinks:load", function () {
  $('#myTable').DataTable();
 
});
</script>

工作并将脚本附加到<head>，但不会加载数据表（不是函数）。我不知道像这样加载它有什么区别，它不起作用，而这个加载它（刷新后）：

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

它们实际上出现在控制台的同一位置，在 <body> 标记内

【问题讨论】：

标签： javascript jquery ruby-on-rails datatables turbolinks

【解决方案1】：

你不能这样写：

<script>
document.addEventListener("turbolinks:load", function () {
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
})
</script>

您必须为脚本标签创建一个元素。看到这个帖子： document.createElement("script") synchronously

只需添加

script.async = true;

供创作使用

 var script = document.createElement('script');
 script.onload = function() {
   alert("Script loaded and ready");
 };
 script.async = true;
 script.src = "https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js";
 document.getElementsByTagName('head')[0].appendChild(script);

【讨论】：

感谢您的努力。但是，它失败了。我已经更新了帖子
很遗憾，它不起作用 - 我不太确定为什么。我想这可能是一个特定的 DataTables 问题，所以我会在那里问：/ 谢谢，真的。
它在我的小提琴中不起作用。但是如果我添加 script.async = true;它奏效了。
我为你做了一个小提琴：jsfiddle.net/bogatyr77/dxrmnw0g/1 只需按运行即可。
是的，我还使用 onload 事件列表器对其进行了测试。但结果和以前一样。它有时有效，有时无效。