在加载 <script> 标记之前等待 turbolinks 加载
Posted
技术标签:
【中文标题】在加载 <script> 标记之前等待 turbolinks 加载【英文标题】：Wait for turbolinks to load before loading a <script> tag 【发布时间】：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> 标记内
【问题讨论】：
【参考方案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 事件列表器对其进行了测试。但结果和以前一样。它有时有效，有时无效。以上是关于在加载 <script> 标记之前等待 turbolinks 加载的主要内容，如果未能解决你的问题，请参考以下文章
通过 <script src=""> 加载 JavaScript ES6 模块并在 <script> 标记中导入所有导出是不是相同？