如何通过JavaScript实现跨网站程序化向文本框输入内容

首先得明确：你遇到的核心障碍是浏览器的同源策略——浏览器会阻止不同域名的网页直接互相操作DOM，这是为了防止恶意网站篡改其他站点的内容，所以你直接从第一个网站操作第二个网站文本框的思路在默认情况下是行不通的。

下面分两种常见场景给你可行的方案：

场景1：两个网站都是你自己控制的（可以修改两边的代码） #

这种情况用postMessage API实现跨页面通信是最优解，这是浏览器官方支持的安全跨域交互方式：

第一步：修改第一个网站的代码 #

我们需要打开新窗口后，等它加载完成再发送填充的文本内容：

function typesomething() {
  // 打开新窗口并保存引用
  const targetWindow = window.open('https://www.example.com', '_blank');
  
  // 轮询检查新窗口是否加载完成
  const loadChecker = setInterval(() => {
    if (targetWindow?.document.readyState === 'complete') {
      clearInterval(loadChecker);
      // 发送消息给目标窗口，第二个参数填目标网站域名（*是通配，建议换成实际域名更安全）
      targetWindow.postMessage('Types Text', 'https://www.example.com');
    }
  }, 100);
}

<button onclick="typesomething()">type something in different website</button>

第二步：修改第二个网站的代码 #

在第二个网站里添加监听消息的逻辑，收到合法消息后填充文本框：

// 监听跨页面消息
window.addEventListener('message', (event) => {
  // 一定要验证消息来源！只处理可信网站发来的消息
  if (event.origin === 'https://你的第一个网站域名.com') {
    // 找到文本框并设置内容
    const textarea = document.querySelector('textarea');
    if (textarea) {
      textarea.value = event.data;
    }
  }
});

<textarea>programmatically type something from my different website</textarea>

注意：把上面的https://你的第一个网站域名.com替换成你实际的第一个网站域名，这一步是防止恶意网站给你的第二个页面发垃圾消息。

场景2：你无法修改第二个网站的代码 #

这种情况就没有合法的前端方案能实现需求了——浏览器的同源策略会彻底阻止跨域DOM操作。

如果你一定要实现这个功能，只能考虑以下非前端页面的方式：

• 开发浏览器扩展（比如Chrome插件）：扩展拥有跨域操作页面DOM的权限，可以在扩展里编写逻辑，监听你的第一个网站操作，然后自动填充第二个网站的文本框。
• 使用自动化测试工具（比如Playwright、Puppeteer）：这类工具可以模拟浏览器操作，不受同源策略限制，但它们是用于自动化测试场景，不是嵌入在你的网站里的前端代码。

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