在加载 <script> 标签之前等待 turbolinks 加载

Question

我遇到了无法在 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

Tried Pointy's reply

将此代码添加到我的 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> 但 DataTables 不会加载（不是函数）。我不知道像这样加载它有什么区别，它不起作用，而这个加载它（刷新后）：

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

它们实际上出现在控制台的同一个地方，在 <body> 标签内

Answer 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>

您必须为脚本标签创建一个元素。看到这个 post： 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);

在加载 <script> 标签之前等待 turbolinks 加载

Wait for turbolinks to load before loading a <script> tag

javascript

jquery

ruby-on-rails

datatables

turbolinks