页面间指令与值传递：如何将page2输入文本传给page1实现语音合成

现有代码基础错误修正 #

先修正control.html中的核心问题：

• 输入框缺少id属性，导致无法通过getElementById获取输入值
• 存在script标签嵌套的语法错误
• 表单提交会默认刷新页面，需阻止该行为

方案一：使用LocalStorage实现数据传递 #

LocalStorage可在同源页面间共享数据，page2写入文本后，page1监听数据变化并触发语音朗读。

修改后的control.html（page2） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <center>
    <form id="textForm">
      <h1 style="color:green">文本输入控制页</h1>
      <h3>输入要朗读的文本</h3>
      <td>输入文本：</td>
      <input type="text" name="pswd1" id="pswd1"> <br><br>
      <button type="submit">提交</button>
    </form>
    <script>
      const form = document.getElementById('textForm');
      const input = document.getElementById('pswd1');

      form.addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止页面刷新
        const inputText = input.value.trim();
        if (inputText) {
          localStorage.setItem('ttsText', inputText);
          input.value = ''; // 清空输入框
        }
      });
    </script>
  </center>
</body>
</html>

修改后的page1的script.js #

// 初始化页面显示
const message = '等待接收文本...'
document.querySelector('#header').innerHTML = message

// 监听LocalStorage数据变化
window.addEventListener('storage', function(e) {
  if (e.key === 'ttsText') {
    const ttsText = e.newValue;
    // 更新页面显示
    document.querySelector('#header').innerHTML = ttsText;
    // 执行文本转语音
    const msg = new SpeechSynthesisUtterance();
    msg.text = ttsText;
    window.speechSynthesis.speak(msg);
  }
});

// 页面加载时检查是否有已存储的文本
const storedText = localStorage.getItem('ttsText');
if (storedText) {
  document.querySelector('#header').innerHTML = storedText;
  const msg = new SpeechSynthesisUtterance();
  msg.text = storedText;
  window.speechSynthesis.speak(msg);
}

方案二：使用Broadcast Channel API（实时通信） #

Broadcast Channel API专为同源页面实时消息传递设计，无需依赖存储，更适合即时触发场景。

修改后的control.html（page2） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <center>
    <form id="textForm">
      <h1 style="color:green">文本输入控制页</h1>
      <h3>输入要朗读的文本</h3>
      <td>输入文本：</td>
      <input type="text" name="pswd1" id="pswd1"> <br><br>
      <button type="submit">提交</button>
    </form>
    <script>
      const form = document.getElementById('textForm');
      const input = document.getElementById('pswd1');
      // 创建广播通道
      const bc = new BroadcastChannel('ttsChannel');

      form.addEventListener('submit', function(e) {
        e.preventDefault();
        const inputText = input.value.trim();
        if (inputText) {
          bc.postMessage(inputText); // 发送消息到广播通道
          input.value = '';
        }
      });

      // 页面关闭时关闭通道
      window.addEventListener('beforeunload', () => bc.close());
    </script>
  </center>
</body>
</html>

修改后的page1的script.js #

// 初始化页面显示
const message = '等待接收文本...'
document.querySelector('#header').innerHTML = message

// 创建广播通道并监听消息
const bc = new BroadcastChannel('ttsChannel');
bc.addEventListener('message', function(e) {
  const ttsText = e.data;
  // 更新页面显示
  document.querySelector('#header').innerHTML = ttsText;
  // 执行文本转语音
  const msg = new SpeechSynthesisUtterance();
  msg.text = ttsText;
  window.speechSynthesis.speak(msg);
});

// 页面关闭时关闭通道
window.addEventListener('beforeunload', () => bc.close());

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