YassineBlue/postmessage-lab

# postMessage 实验 这是一个浏览器实验，演示父页面与 iframe 之间的 `window.postMessage()` 通信。 旨在以清晰直观的方式展示如何使用 JavaScript 实现跨窗口通信 ## 在线演示 https://yassineblue.github.io/postmessage-lab/ ## 功能特性 - 从父页面向子 iframe 发送消息 - 子 iframe 自动发送确认回复 - 子 iframe 可向父页面手动发送回复 - 使用 `event.origin` 和 `window.location.origin` 实现安全的跨域通信 - 实时消息日志记录 - 基于原生浏览器 API 构建（无外部框架） ## 工作原理 父页面通过 `window.postMessage()` 向 iframe 发送消息。 iframe 使用 `window.addEventListener("message")` 监听消息，验证来源，然后通过相同 API 发送回复。 ## 安全性 所有消息均通过 `event.origin` 和 `window.location.origin` 进行验证，确保跨域通信的安全性。 ## 文件结构 - `index.html` → 父页面 - `child.html` → 子 iframe 窗口 ## 运行项目 本项目可通过 XAMPP 等服务器本地运行，也可直接通过上述 GitHub Pages 在线演示访问。 ### 使用 XAMPP 运行 1. 安装并打开 XAMPP 2. 启动 **Apache** 服务器 3. 将项目文件夹移动到： ``` xampp/htdocs/postmessage-lab/ ``` 4. 在浏览器中打开： ``` http://127.0.0.1/postmessage-lab/ ```

标签：CMS安全, GitHub Pages, HTML, iframe, JavaScript, postMessage, Syscall, Web API, Web开发, XAMPP, 原点验证, 多模态安全, 安全通信, 实时日志, 实验室演示, 教育项目, 数据可视化, 无框架, 浏览器API, 消息传递, 自定义脚本, 跨域通信, 跨窗口通信