同一Jupyter Widget中两个HTML页面的通信实现方案咨询

首先明确：不需要Node.js、Electron这类框架，你的场景是浏览器内的前端页面交互，纯JavaScript方案就能搞定。下面给你两种简单可行的实现方式：

方案1：使用postMessage跨页面通信（推荐，支持跨域） #

postMessage是浏览器提供的标准跨页面/跨iframe通信API，适合大多数场景。

修改后的页面1（发送方）代码 #

<!DOCTYPE html>
<!-- PAGE 1 -->
<html>
<body>
<button type="button" class="snd_Button">Click</button>

<script>
// 给按钮绑定点击事件，点击时向父页面发送消息
document.querySelector('.snd_Button').addEventListener('click', () => {
  window.parent.postMessage(
    { type: 'UPDATE_TEXT', text: '按钮被点击啦！' },
    '*' // 在Jupyter环境下可以用*，正式环境建议指定具体origin
  );
});
</script>
</body>
</html>

修改后的页面2（接收方）代码 #

<!DOCTYPE html>
<!-- PAGE 2 -->
<html>
<body>
<h1 class="Listener">I must react.</h1>

<script>
// 监听来自父页面的消息
window.addEventListener('message', (event) => {
  // 验证消息类型，避免无关消息干扰
  if (event.data?.type === 'UPDATE_TEXT') {
    document.querySelector('.Listener').textContent = event.data.text;
  }
});
</script>
</body>
</html>

在Jupyter Notebook中嵌入iframe的示例 #

在Notebook单元格里用HTML嵌入两个iframe，父页面会自动转发消息：

<iframe src="page1.html" width="300" height="100"></iframe>
<iframe src="page2.html" width="300" height="100"></iframe>

如果两个iframe是同源的，也可以让页面1直接找到页面2的iframe对象发送消息，不需要父页面中转，比如给页面2的iframe加id：

<iframe id="page2Frame" src="page2.html" width="300" height="100"></iframe>

然后页面1的代码可以改成：

document.querySelector('.snd_Button').addEventListener('click', () => {
  const page2Window = window.parent.document.getElementById('page2Frame').contentWindow;
  page2Window.postMessage({ type: 'UPDATE_TEXT', text: '按钮被点击啦！' }, '*');
});

方案2：使用localStorage监听变化（仅同源场景） #

如果两个页面是同源的（比如都是Jupyter本地加载的静态文件），可以用localStorage的存储事件来实现通信，代码更简单。

修改后的页面1（发送方）代码 #

<!DOCTYPE html>
<!-- PAGE 1 -->
<html>
<body>
<button type="button" class="snd_Button">Click</button>

<script>
document.querySelector('.snd_Button').addEventListener('click', () => {
  // 把要传递的数据存在localStorage里
  localStorage.setItem('pageUpdate', JSON.stringify({ text: '按钮被点击啦！' }));
});
</script>
</body>
</html>

修改后的页面2（接收方）代码 #

<!DOCTYPE html>
<!-- PAGE 2 -->
<html>
<body>
<h1 class="Listener">I must react.</h1>

<script>
// 监听localStorage的变化
window.addEventListener('storage', (event) => {
  if (event.key === 'pageUpdate') {
    const data = JSON.parse(event.newValue);
    document.querySelector('.Listener').textContent = data.text;
  }
});
</script>
</body>
</html>

为什么不需要Node.js/Electron？ #

你的需求是浏览器内的前端页面交互，Jupyter Notebook本身已经提供了完整的浏览器运行环境，纯JavaScript就能实现页面间的通信，不需要后端服务（Node.js）或者桌面应用框架（Electron）。

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