如何实现iframe加载完成后自动点击其内部的指定按钮

前置注意事项 #

仅当父页面与iframe加载的站点同源（协议、域名、端口三者完全一致）时，以下方案可正常运行。浏览器出于安全策略限制，跨域场景下禁止父页面直接操作iframe内部DOM，跨域场景需要iframe侧配合通过postMessage通信实现。

基础实现代码 #

首先给你的iframe元素设置唯一id方便获取：

<iframe id="customIframe" src="目标站点地址" width="100%" height="600"></iframe>

添加JS逻辑监听iframe加载事件，触发后查找并点击按钮：

const iframe = document.getElementById('customIframe');
iframe.addEventListener('load', () => {
  // 兼容不同浏览器获取iframe内部document的写法
  const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 直接通过id获取目标按钮
  const targetBtn = innerDoc.getElementById('nextBtn');
  targetBtn && targetBtn.click();
});

兼容动态渲染按钮的场景 #

如果目标按钮是iframe内部JS动态生成的，load事件触发时按钮还未渲染，可增加轮询检测逻辑：

const iframe = document.getElementById('customIframe');
iframe.addEventListener('load', () => {
  const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  let retry = 0;
  // 每200ms检测一次，最多检测10次共2s，避免无限执行
  const timer = setInterval(() => {
    const targetBtn = innerDoc.getElementById('nextBtn');
    if (targetBtn) {
      targetBtn.click();
      clearInterval(timer);
    }
    retry++ >= 10 && clearInterval(timer);
  }, 200);
});

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