能否通过JavaScript跨域加载第三方页面并自动填充输入字段？

我无法控制带有用户可填写输入字段的网页A，但拥有可运行JavaScript的受控网页B。是否可在网页B中添加JavaScript代码，实现加载网页A、等待其加载完成后自动为输入字段填充指定值？

可以实现，但能否成功取决于网页A和网页B是否同源（即是否拥有相同的协议、域名和端口），以下分两种场景说明：

场景1：A与B同源 #

这种情况下没有跨域限制，直接通过iframe加载网页A后即可操作其DOM元素，示例代码如下：

// 在网页B中创建iframe并加载网页A
const iframe = document.createElement('iframe');
iframe.src = '网页A的完整URL';
// 可根据需求设置iframe的显示样式，比如隐藏或全屏
iframe.style.width = '100%';
iframe.style.height = '800px';
document.body.appendChild(iframe);

// 监听iframe加载完成事件
iframe.onload = () => {
  // 获取iframe内部的文档对象
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  
  // 定位目标输入字段（这里以id为"target-input"的输入框为例）
  const targetInput = iframeDoc.getElementById('target-input');
  if (targetInput) {
    // 填充指定值
    targetInput.value = '你要填充的内容';
    // 若页面有监听输入事件的逻辑，手动触发input事件确保逻辑生效
    targetInput.dispatchEvent(new Event('input'));
  }
};

场景2：A与B不同源 #

浏览器的同源策略会禁止网页B直接操作不同源iframe内的DOM，此时需要根据权限情况选择方案：

• 若能修改网页A的代码：通过postMessage实现跨域消息传递，网页B发送填充指令，网页A接收后自行完成填充：
  网页B端代码：

  const iframe = document.createElement('iframe');
  iframe.src = '网页A的完整URL';
  document.body.appendChild(iframe);
  
  iframe.onload = () => {
    // 向网页A发送填充指令，建议将第二个参数替换为网页A的具体域名以提升安全性
    iframe.contentWindow.postMessage({
      action: 'fillInput',
      fieldSelector: '#target-input',
      value: '你要填充的内容'
    }, '*');
  };
  

  网页A端代码：

  window.addEventListener('message', (event) => {
    // 校验消息来源，仅处理可信的网页B发送的消息
    if (event.origin !== '网页B的完整域名') return;
    
    if (event.data.action === 'fillInput') {
      const targetInput = document.querySelector(event.data.fieldSelector);
      if (targetInput) {
        targetInput.value = event.data.value;
        targetInput.dispatchEvent(new Event('input'));
      }
    }
  });
  

• 完全无法修改网页A：只能借助浏览器扩展（如Chrome扩展）实现，扩展拥有跨域操作DOM的权限，可以在网页A加载完成后自动执行填充逻辑。

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