javascript - 异步脚本改变dom后如何执行js代码？

Question

我正在加载一个改变 dom 的异步脚本。如果我向脚本添加 onload ，我可以在脚本加载后运行代码。然而，dom还没有被脚本编辑过。有没有办法等到 dom 编辑完成后再运行我的代码？

简单示例:

<script>
  function onLoad() {
    // this logs null, but it should return a div
    console.log('loaded', document.getElementById('asdf'));
  }

  var s = document.createElement("script");
  s.type = "text\/javascript";
  s.onload = onLoad
  s.src = "some script that adds a div with id of asdf";
  document.head.insertAdjacentElement('beforeend', s);
</script>

Answer 1

问题是您立即调用onLoad()。删除 () 以引用函数 onLoad，而不是调用该函数。

<div id="asdf">asdf</div>
<script>
  function onLoad() {
    // this logs null, but it should return a div
    console.log('loaded', document.getElementById('asdf'));
  }

  var s = document.createElement("script");
  s.type = "text/javascript";
  s.onload = onLoad;
  s.src = "data:text/javascript,console.log('script src')";
  document.head.insertAdjacentElement('beforeend', s);
</script>