Question

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

我试过了：

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

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

有什么建议吗？

Answer 1

使用DOMContentLoaded事件：

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

document.addEventListener("DOMContentLoaded", function (event) {
  console.log("DOM fully loaded and parsed");

  // Your code here
});

DOMContentLoaded与jQuery的{{3}}事件相同。

ready

Answer 2

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

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

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

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

Answer 3

告诉你的代码等待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 4

当浏览器在<head>中运行您的代码时，<body>元素尚未存在。因此，document.body为null。

要创建<body>元素的脚本，请使用＆＃39; load＆＃39; document的事件，例如：

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

Answer 5

当你的dom元素成功渲染时，

$(document).ready(){}被执行。

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

5 个答案: