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

如何解决在加载 <script> 标签之前等待 turbolinks 加载

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

简而言之，它的问题是 DataTables 在我刷新页面之前不会加载。所以我想通过在 turbolinks:load 标签中添加一个 <script> 事件侦听器来解决它，以便在 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> 标记内

解决方法

你不能这样写：

<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);

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

如何解决在加载 <script> 标签之前等待 turbolinks 加载

解决方法

相关推荐