如何使用Javascript实现HTML页面间传值并在新页面自动提交表单

实现说明 #

核心限制 #

现代浏览器的同源策略禁止跨域操作其他页面的DOM，如果你要打开的新页面和你的test.html不属于同一个域名、端口、协议，你无法直接操作新页面的元素，这是浏览器的安全规则，旧版IE的VBScript方案能生效是因为旧版IE安全策略宽松，目前所有主流浏览器（Edge、Chrome、Firefox等）都遵守同源策略限制，跨域场景下无法直接实现填充提交的效果。

你原有代码的问题 #

1. getElementsByTagName返回的是元素集合，不是单个元素，需要加索引[0]才能获取到目标元素
2. 表单输入框赋值要使用value属性，textContent仅适用于普通文本元素的内容修改
3. 你需要操作的是新打开窗口的DOM，不是当前页面的document对象

同源场景实现方案 #

如果新页面和你的test.html同源，可以用以下代码实现：

<!-- test.html 完整代码 -->
<!DOCTYPE html>
<html>
<body>
  <input type="text" id="inputBox" placeholder="输入要提交的内容">
  <button id="openBtn">提交并打开新页面</button>
  <script>
    document.getElementById('openBtn').addEventListener('click', () => {
      // 获取当前页输入的内容
      const inputValue = document.getElementById('inputBox').value.trim();
      if (!inputValue) return;
      // 打开同源目标页面
      const newWindow = window.open('./target.html', '_blank');
      // 监听新页面加载完成事件
      newWindow.onload = () => {
        // 填充内容到新页面的输入框，假设新页面输入框id为targetInput
        const targetInput = newWindow.document.getElementById('targetInput');
        if (targetInput) {
          targetInput.value = inputValue;
          // 自动提交新页面表单，假设新页面表单id为targetForm
          newWindow.document.getElementById('targetForm').submit();
        }
      };
    });
  </script>
</body>
</html>

跨域场景替代方案 #

如果要打开的是第三方站点，你可以确认目标站点是否支持GET参数传值，直接将输入内容编码后拼接到目标URL中，打开拼接后的URL即可达到自动提交的效果，示例逻辑如下：

document.getElementById('openBtn').addEventListener('click', () => {
  const inputValue = encodeURIComponent(document.getElementById('inputBox').value.trim());
  if (!inputValue) return;
  // 示例：目标站点搜索接口接收q参数，直接拼接后打开
  window.open(`/search?q=${inputValue}`, '_blank');
});

如果目标站点不支持GET传参，前端没有方案可以实现跨域填充提交的需求。

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