如何在末尾的添加脚本中添加脚本

客户端正在使用Sharetribe，它允许您通过管理员添加自定义JS，但仅限于头部。 我希望我的脚本在jQuery之后加载，但jQuery在主体的末尾加载。 如何在doc加载后编写将主要脚本添加到最后的vanilla JS？

我试过这个：

 var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://cdn..."; document.body.appendChild(script); var script2 = document.createElement("script"); script2.type = "text/javascript"; script2.text = "$(SOME.CODE.HERE);" document.body.appendChild(script2);  

但它在文档加载完成之前执行（特别是在jQuery可用之前）。 我能想到的唯一一件事是设置一个计时器，但这似乎有点儿。

任何建议？

Answer 1

使用DOMContentLoaded事件：

在完全加载和解析文档时触发DOMContentLoaded事件，而不等待样式表，图像和子帧完成加载（加载事件可用于检测完全加载的页面）。

 document.addEventListener("DOMContentLoaded", function (event) { console.log("DOM fully loaded and parsed"); // Your code here }); 

DOMContentLoaded与jQuery ready事件相同。

文档

Answer 2

告诉你的代码等待DOM完成加载：

 window.onload = function() { var script = document.createElement("script"); script.type = "text/javascript"; //.... } 

或者使用jQuery：

 $(document).ready(function() { var script = document.createElement("script"); script.type = "text/javascript"; //.... }); 

Answer 3

当你在等待jQuery加载时，你可以简单地将你的代码包装在jQuery的$(document).ready()方法中 ：

 $(document).ready(function() { // Your code here. }); 

在文档“准备就绪”之前，页面无法安全操作。 jQuery为您检测这种准备状态。 包含在$( document ).ready()只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。

我意识到你已经提到过你想在“vanilla”JS中使用它，但是当你等待jQuery加载时，这似乎有点多余。

Answer 4

当浏览器在运行代码时， 元素尚不存在。 因此， document.body为null 。

要创建元素的脚本，请使用document “load”事件，例如：

 ............. document.addEventListener('load', function(event){ var script = document.createElement('script'); ............... document.body.appendChild(script); }, false); ............ 

Answer 5

当您的dom元素成功呈现时，将执行$(document).ready(){} 。