如何在body闭合标签前插入最后加载的script元素

问题原因 #

你遇到的情况是因为页面中的其他插件脚本在动态向body追加元素：你的脚本执行时，这些插件还未完成元素插入，导致你的script先被加到body中；之后插件继续添加了element3到element7，最终你的脚本就出现在了中间位置。

解决方案 #

方案1：等待页面所有资源加载完成后插入

利用window.onload事件，它会在页面所有资源（图片、脚本、样式等）加载完成后触发，此时其他插件的动态元素基本都已添加完毕：

window.onload = function() {
  const myscript = document.createElement('script');
  myscript.src = 'https://xxxxx/myscript.min.js';
  myscript.async = true;
  document.body.appendChild(myscript);
};

方案2：用MutationObserver监听body元素变化

如果插件的动态元素是异步加载（比如通过AJAX获取后添加），window.onload可能无法覆盖这种场景。可以用MutationObserver监听body的子节点变化，当一段时间内没有新元素添加时，再插入你的脚本：

// 配置观察规则：监听子节点添加
const observerConfig = { childList: true };
let lastElementAddTime = Date.now();
const idleTimeout = 1000; // 1秒无新元素则判定加载完成

const observer = new MutationObserver(() => {
  lastElementAddTime = Date.now();
});
observer.observe(document.body, observerConfig);

// 定时检查是否停止添加元素
const checkTimer = setInterval(() => {
  if (Date.now() - lastElementAddTime > idleTimeout) {
    observer.disconnect();
    clearInterval(checkTimer);
    // 插入目标脚本
    const myscript = document.createElement('script');
    myscript.src = 'https://xxxxx/myscript.min.js';
    myscript.async = true;
    document.body.appendChild(myscript);
  }
}, 500);

方案3：直接在</body>前放同步脚本

如果能修改HTML结构，直接把脚本创建代码放在</body>前的同步脚本块中，这是最可靠的方式——同步脚本会按顺序执行，此时前面的插件脚本已执行完毕，动态元素也已添加完成：

<!-- 页面其他内容 -->
<script>
  const myscript = document.createElement('script');
  myscript.src = 'https://xxxxx/myscript.min.js';
  myscript.async = true;
  document.body.appendChild(myscript);
</script>
</body>

内容的提问来源于stack exchange，提问作者Kelson Batista