异步脚本更改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() 。 Remove ()引用函数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> 

Answer 2

尝试添加addEventListener以等待元素加载完毕，然后再运行脚本。

  function onLoad() { document.addEventListener("load",function(e){ if(e.target.id == 'asdf'){ console.log('loaded', document.getElementById('asdf')); } }); }