如何在所有脚本执行完毕后调用init()避免元素未找到错误？

你的问题核心是不可控的第三方脚本在页面加载完成后仍在动态修改DOM，导致window.load和DOMContentLoaded触发时目标输入元素还未生成，所以会出现“元素未找到”错误。以下是几种比setTimeout更可靠的解决方案：

1. 使用MutationObserver监听DOM变化 #

这是最推荐的方案，它能实时监听目标元素所在的DOM区域，一旦元素出现就立即执行init()，无需等待固定时间。示例代码：

// 封装监听函数，传入目标选择器和回调
function waitForElement(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    const targetElement = document.querySelector(selector);
    if (targetElement) {
      observer.disconnect(); // 找到元素后停止监听
      callback(targetElement);
    }
  });

  // 监听body下所有子元素的变化（包括子树）
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 调用：替换成你要填充的输入字段选择器
waitForElement('#username-input', () => {
  init();
});

2. 将你的脚本放在页面最末尾执行 #

如果第三方脚本是同步加载的，把你的脚本标签放在所有第三方脚本之后、</body>标签之前。这样浏览器会按顺序执行脚本，你的init()会在前面的第三方脚本执行完毕后再运行。但如果第三方脚本是异步加载（带有async/defer属性），这个方法可能无效。

3. 监听第三方脚本的加载完成事件 #

如果你知道第三方脚本的具体URL，可以直接监听它的load事件：

const thirdPartyScript = document.querySelector('script[src="https://example.com/third-party.js"]');
if (thirdPartyScript) {
  thirdPartyScript.addEventListener('load', () => {
    init();
  });
}
// 处理脚本已经加载完成的情况
if (thirdPartyScript && thirdPartyScript.readyState === 'complete') {
  init();
}

注意：如果第三方脚本是动态插入到页面中的，需要先捕获到该脚本元素才能监听。

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