JavaScript如何将父窗口表单输入内容显示到子窗口指定div中

问题原因 #

• 冗余错误代码阻塞逻辑：send函数第一行尝试操作父页面的#result元素，但父页面本身没有该元素，这行代码会直接抛出JS错误，阻塞后续对子窗口的操作逻辑。
• 子页面加载异步问题：调用window.open打开子窗口后，display.html的资源加载、DOM解析是异步执行的，父窗口直接操作子窗口DOM时，子页面的#result元素还未渲染完成，querySelector会返回null，赋值操作自然失效。
• 边界校验缺失：如果未先打开子窗口就调用send函数，此时childWindow还是初始的空字符串，访问childWindow.document会直接抛出错误，后续逻辑完全无法执行。

修复方案 #

基础修复（无需修改display.html） #

直接调整父页面的JS代码即可，补充校验逻辑和加载监听：

var childWindow = ""
var newTabUrl = "./display.html"

function send(){
  const inputVal = document.querySelector("#mot").value;
  // 校验子窗口状态
  if(!childWindow || childWindow.closed) {
    alert("请先点击nouveau打开子窗口");
    return;
  }
  // 子页面加载完成直接赋值，未加载完成则等待load事件触发后再操作
  if(childWindow.document.readyState === "complete") {
    childWindow.document.querySelector("#result").innerHTML = inputVal;
  } else {
    childWindow.addEventListener('load', () => {
      childWindow.document.querySelector("#result").innerHTML = inputVal;
    }, {once: true}) // once参数保证事件只触发一次，避免多次绑定冗余逻辑
  }
}

function openNewWindow(){
  childWindow = window.open(newTabUrl,"display");
}

function refresh(){
  // 补充子窗口状态校验，避免报错
  if(childWindow && !childWindow.closed) {
    childWindow.location.href=newTabUrl;
  }
}

优化方案（同源场景稳定性更高） #

如果两个页面同域名（你当前用相对路径的场景属于同源），可以用localStorage做跨窗口通信，不需要处理加载时序问题，就算子窗口刷新也会自动同步内容：

1. 给display.html添加如下JS逻辑：

// 监听storage事件，父窗口修改localStorage时自动更新内容
window.addEventListener('storage', (e) => {
  if(e.key === 'sendContent') {
    document.querySelector('#result').innerHTML = e.newValue;
  }
})
// 页面加载时主动读取一次内容，避免刷新后内容丢失
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#result').innerHTML = localStorage.getItem('sendContent') || '';
})

2. 父窗口的send函数可以简化为：

function send(){
  const inputVal = document.querySelector("#mot").value;
  localStorage.setItem('sendContent', inputVal);
}

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