JavaScript实现iframe表单逐次填值1-30并自动提交的方法

注意：仅当iframe页面与当前父页面符合同源策略（同协议、同域名、同端口）时，父页面才可直接通过JS操作iframe内部DOM，跨域场景下会被浏览器安全规则拦截，需将脚本直接注入到iframe对应页面中运行。

实现逻辑说明 #

因为每次表单提交都会触发iframe页面刷新/跳转，重置内部DOM，不能用循环一次性批量执行，需要监听iframe加载完成事件，每加载完成一次就完成一次「填值→触发输入框原生事件→提交表单」的流程，直到1-30所有数字提交完成后自动停止。
目标DOM对应关系：

• 待填值输入框：id为yaas-poo的用户名输入框，绑定了onblur值处理逻辑
• 提交触发：原表单绑定了onsubmit校验逻辑，不能直接调用form.submit()（会跳过校验），需触发和手动点击提交按钮完全一致的原生提交行为

可直接运行的代码 #

首先给你页面里的iframe加上id方便定位，示例：

<iframe id="loginIframe" src="表单所在页面地址"></iframe>

在父页面控制台运行以下脚本即可：

let currentNum = 1;
const MAX_COUNT = 30;
const iframe = document.getElementById('loginIframe');

const runTask = () => {
  if (currentNum > MAX_COUNT) {
    iframe.removeEventListener('load', runTask);
    console.log('1-30数字全部提交完成');
    return;
  }
  // 获取iframe内部文档对象
  const doc = iframe.contentDocument || iframe.contentWindow.document;
  const input = doc.getElementById('yaas-poo');
  const form = doc.forms.login;

  if (input && form) {
    // 填入当前数字
    input.value = currentNum;
    // 触发input事件，适配页面可能存在的值监听逻辑
    input.dispatchEvent(new Event('input', { bubbles: true }));
    // 触发blur事件，执行输入框原有的Re()值处理函数
    input.dispatchEvent(new Event('blur', { bubbles: true }));
    // 触发表单提交，走原生onsubmit校验逻辑，和手动点击按钮效果一致
    if (form.requestSubmit) {
      form.requestSubmit();
    } else {
      form.querySelector('button[type="submit"]').click();
    }
    currentNum++;
  }
};

// 监听iframe加载完成事件，每次加载完执行一次填值提交
iframe.addEventListener('load', runTask);
// 如果iframe已经加载完成，手动触发第一次执行
if (iframe.contentDocument.readyState === 'complete') {
  runTask();
}

非iframe场景适配 #

如果你直接在表单所在页面运行脚本，不需要操作iframe，直接把代码中获取doc的部分替换为当前页面的document即可，其余逻辑不变。

常见问题说明 #

• 不要用setInterval固定延迟执行：如果网络波动导致页面加载速度慢于你设置的间隔，会出现填值失败、重复提交的问题，用加载完成事件触发最稳定。
• 不要直接修改value后立刻提交：原输入框的blur事件绑定了值处理函数，不触发blur直接提交会导致值没有经过页面原有逻辑处理，大概率提交失败。
• 跨域场景下父页面无法直接操作iframe DOM，可借助油猴脚本、浏览器扩展的内容脚本能力，直接把逻辑注入到iframe页面内部运行。

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