使用Javascript在新打开标签页中自动填充表单字段的问题咨询

前置要求：仅当前页面与新打开的目标页面同源（协议、域名、端口三者完全一致）时，以下方案生效，否则浏览器同源策略会禁止你操作新标签页的DOM。

问题原因 #

• 你现有代码的最后一行逻辑错误：直接执行了DOM赋值操作，再把赋值的结果绑定给wdw1.onload，没有把填充逻辑封装为新页面加载完成后的回调函数，代码执行时机远早于新页面加载完成的时间点，自然无法正确操作新页面的元素。

修复后代码 #

// 读取原页面输入的数字
const inputNumber = document.getElementById('inputNumber').value;
// 打开新标签页
const wdw1 = window.open("https://example.com", "win1");
// 绑定新标签页的加载完成事件回调
wdw1.addEventListener('load', () => {
  // 必须通过wdw1.document查询新标签页内的元素
  const targetInput = wdw1.document.getElementById("search");
  targetInput.value = inputNumber;
  // 要点击新标签页指定按钮的话，补充下面这行即可，替换为目标按钮的id
  // wdw1.document.getElementById("目标按钮的id").click();
});

兜底兼容方案 #

如果目标页面有客户端渲染逻辑，load事件触发时DOM还未完全渲染，可以在回调内加短延时兜底：

wdw1.addEventListener('load', () => {
  setTimeout(() => {
    const targetInput = wdw1.document.getElementById("search");
    targetInput.value = inputNumber;
    wdw1.document.getElementById("目标按钮的id").click();
  }, 300);
});

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