如何通过JavaScript访问新标签页中的HTML元素并写入值

你遇到的报错和焦点切换无关，核心问题是新标签页的DOM还没加载完成，你就提前执行了getElementById查询，此时目标元素还不存在，返回null才触发了类型错误。

同域场景下的解决方案 #

如果打开的新页面和你的当前站点符合同源策略（协议、域名、端口三者完全一致），只需要监听新标签页的加载完成事件，等DOM渲染结束后再操作元素即可，示例代码如下：

function opencem() {
  var newTab = window.open('https://slkub...');
  // 等待新页面DOM加载完成后再执行操作
  newTab.addEventListener('DOMContentLoaded', () => {
    const userInput = newTab.document.getElementById('f-username');
    // 增加元素存在性判断，避免极端场景报错
    if (userInput) {
      userInput.value = 'test';
    }
    newTab.focus();
  })
}

如果需要等页面所有资源（图片、样式等）都加载完成再操作，可以把DOMContentLoaded事件换成load事件。

跨域场景下的解决方案 #

如果新打开的页面和你的当前站点跨域，浏览器同源策略会禁止你直接操作跨域页面的DOM，此时需要用postMessage实现跨页面通信完成数据填充：

1. 原页面代码调整为：

function opencem() {
  var newTab = window.open('https://slkub...');
  newTab.addEventListener('load', () => {
    // 向新页面发送填充数据
    newTab.postMessage(
      { type: 'fillUser', value: 'test' },
      'https://slkub...' // 这里填新页面的完整域名，限制消息接收方避免安全风险
    );
    newTab.focus();
  })
}

2. 新页面内添加消息监听逻辑：

window.addEventListener('message', (event) => {
  // 校验消息来源，只接受自己站点的消息
  if (event.origin !== '你的原站点完整域名') return;
  if (event.data?.type === 'fillUser') {
    const userInput = document.getElementById('f-username');
    if (userInput) {
      userInput.value = event.data.value;
    }
  }
})

如果新页面不属于你可控的范围，跨域状态下没有合法方式可以直接操作它的DOM元素。

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