如何准确检测页面加载完成，适配单页应用场景下的自动化点击流程

兼容传统页面+SPA的页面就绪检测方案 #

针对Chrome扩展流程录制的场景，核心解决思路是抛弃固定延时和全局load事件，采用「路由变化感知」+「目标状态校验」的分层判断逻辑，具体可落地的方案如下：

方案1：路由监听 + 目标DOM元素就绪检测（推荐，准确率最高）

SPA路由切换不会触发全局window.load事件，但所有路由变更都会走history.pushState/history.replaceState（history路由）或hashchange（hash路由），先劫持这几个事件感知页面切换，再监听你后续操作需要用到的目标DOM是否渲染完成、可交互，只要目标元素就绪就可以触发后续操作，不需要等全页加载。
实现代码参考：

// 1. 封装SPA路由变化监听
const originPushState = history.pushState;
history.pushState = function(...args) {
  originPushState.apply(this, args);
  window.dispatchEvent(new CustomEvent('spaRouteChanged'));
};
const originReplaceState = history.replaceState;
history.replaceState = function(...args) {
  originReplaceState.apply(this, args);
  window.dispatchEvent(new CustomEvent('spaRouteChanged'));
};
// 兼容hash路由场景
window.addEventListener('hashchange', () => window.dispatchEvent(new CustomEvent('spaRouteChanged')));
// 兼容传统页面初始加载
window.addEventListener('load', () => window.dispatchEvent(new CustomEvent('spaRouteChanged')));

// 2. 封装目标元素等待工具
function waitForTargetElement(selector, timeout = 15000) {
  return new Promise((resolve, reject) => {
    // 先检查元素是否已经存在且可见
    const existedEl = document.querySelector(selector);
    if (existedEl && existedEl.offsetParent !== null) {
      return resolve(existedEl);
    }
    // 监听DOM变化检测元素
    const observer = new MutationObserver((mutations) => {
      const targetEl = document.querySelector(selector);
      if (targetEl && targetEl.offsetParent !== null) {
        observer.disconnect();
        resolve(targetEl);
      }
    });
    observer.observe(document.documentElement, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['style', 'class']
    });
    // 超时兜底
    setTimeout(() => {
      observer.disconnect();
      reject(new Error(`Target element ${selector} not found within timeout`));
    }, timeout);
  });
}

// 3. 业务逻辑调用
window.addEventListener('spaRouteChanged', async () => {
  try {
    // 替换为你后续点击操作对应的目标元素选择器
    await waitForTargetElement('#submit-btn');
    // 页面就绪，立即执行你的逻辑
    UDAPluginSDK.showhtml();
  } catch (err) {
    // 超时兜底处理，可根据业务需求调整
    console.error('Page ready timeout', err);
  }
});

方案2：无明确目标元素时，用页面空闲判断兜底

如果录制流程时没法提前确定后续操作的目标元素选择器，可以结合requestIdleCallback和资源加载状态判断页面是否进入就绪状态：

function waitForPageReady(callback, maxWait = 3000) {
  const startTime = Date.now();
  function check() {
    // 判断条件：所有网络请求已完成、无正在进行的长任务
    const allResourceLoaded = performance.getEntriesByType('resource').every(item => item.responseEnd > 0);
    const hasRunningLongTask = performance.getEntriesByType('longtask').some(task => task.startTime + task.duration > Date.now() - 100);
    if (allResourceLoaded && !hasRunningLongTask) {
      requestIdleCallback(callback, { timeout: 1000 });
    } else if (Date.now() - startTime < maxWait) {
      setTimeout(check, 100);
    } else {
      // 超时兜底执行
      callback();
    }
  }
  check();
}

// 路由变化后调用
window.addEventListener('spaRouteChanged', () => {
  waitForPageReady(() => {
    UDAPluginSDK.showhtml();
  });
});

落地建议

优先使用方案1，只有在无法获取目标元素选择器的场景下用方案2兜底，两种方案结合可以覆盖99%的传统页面和SPA场景，比固定延时的触发准确率提升90%以上。

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