如何用JavaScript检测网页是否完全加载（Automation Anywhere场景）

当然可以通过JavaScript实现网页全资源加载的检测，以下是几种实用方案，可直接在Automation Anywhere的「执行JavaScript」动作中使用：

方案1：检测基础全资源加载（适合静态页面） #

当document.readyState变为complete时，意味着页面所有资源（图片、脚本、样式表、iframe等）已加载完成。结合事件监听和即时判断，可避免页面已加载完成时错过触发时机：

function waitForFullLoad() {
  return new Promise((resolve) => {
    if (document.readyState === 'complete') {
      resolve(true);
    } else {
      window.addEventListener('load', () => {
        resolve(true);
      });
    }
  });
}

waitForFullLoad().then(() => {
  return true;
});

在Automation Anywhere中，将这段代码放入执行JavaScript动作后，可循环检查返回值，直到为true再执行后续步骤。

方案2：针对动态加载内容的检测（含懒加载资源） #

如果页面存在AJAX加载内容、懒加载图片，window.load可能无法覆盖这类动态资源。可扩展检测逻辑，检查所有图片的加载状态，同时监听动态元素：

function checkAllResourcesLoaded() {
  // 检查所有图片是否加载完成
  const allImagesLoaded = Array.from(document.images).every(img => img.complete);
  // 检查文档基础加载状态
  const docComplete = document.readyState === 'complete';
  // 检查动态脚本加载状态（适配多数场景）
  const dynamicScriptsLoaded = Array.from(document.scripts).every(script => script.readyState === 'complete' || script.readyState === undefined);
  
  return allImagesLoaded && docComplete && dynamicScriptsLoaded;
}

function waitForDynamicLoad() {
  return new Promise((resolve) => {
    const interval = setInterval(() => {
      if (checkAllResourcesLoaded()) {
        clearInterval(interval);
        resolve(true);
      }
    }, 500); // 每500ms检查一次，可根据页面调整间隔
  });
}

waitForDynamicLoad().then(() => {
  return true;
});

注：如果页面有特定动态组件（如框架渲染内容），可针对性添加检测条件，比如检查关键元素是否存在且内容已渲染。

方案3：用MutationObserver监听DOM变化（适合单页应用） #

对于单页应用这类频繁更新DOM的页面，可通过MutationObserver监听DOM树变化，直到无新元素插入且所有资源加载完成：

function checkAllResourcesLoaded() {
  const allImagesLoaded = Array.from(document.images).every(img => img.complete);
  const docComplete = document.readyState === 'complete';
  return allImagesLoaded && docComplete;
}

function waitForSPAComplete() {
  return new Promise((resolve) => {
    let lastChangeTime = Date.now();
    const observer = new MutationObserver(() => {
      lastChangeTime = Date.now();
    });

    // 监听整个文档的DOM变化
    observer.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      characterData: true
    });

    // 检查3秒内无DOM变化且资源加载完成
    const checkInterval = setInterval(() => {
      if (Date.now() - lastChangeTime > 3000 && checkAllResourcesLoaded()) {
        observer.disconnect();
        clearInterval(checkInterval);
        resolve(true);
      }
    }, 1000);
  });
}

waitForSPAComplete().then(() => {
  return true;
});

在Automation Anywhere中的使用建议 #

1. 将上述代码放入「Execute JavaScript」动作，设置返回值为布尔类型
2. 添加循环判断逻辑，直到JavaScript返回true，再执行后续RPA步骤
3. 根据页面实际情况调整检查间隔和超时时间，避免无限等待

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