【免费下载链接】IELTS-practice雅思阅读与听力练习系统支持题库浏览、套题练习、成绩记录、错题分析、数据备份与本地题库导入。项目地址https://gitcode.com/gh_mirrors/ie/IELTS-practice点击查看免费下载在IELTS AtlasIELTS-practice雅思阅读与听力练习系统中每次点击开始练习成绩都能自动回到主窗口的练习记录里——这背后靠的是一套基于浏览器原生postMessage 跨窗口通信协议的握手机制。本文带你快速看懂主窗口与练习窗口如何打招呼、7 种消息各管什么、断线了怎么自愈以及新手常见的成绩没保存该如何排查。 术语速通postMessage 是 W3C 标准 API允许两个不同文档两个窗口/标签页互相发纸条而不需要共享内存也不受同源策略阻塞。一、为什么要开第二个窗口主程序运行在index.html里负责题库浏览、练习记录、统计。练习时系统会用新窗口打开具体题目页主窗口父窗口管会话、收成绩、存记录核心逻辑在 js/app/examSessionMixin.js练习窗口子窗口加载题目与文章负责答题并把结果寄回去协议实现注入自 js/practice-page-enhancer.js为什么成绩能寄回去因为子窗口保存着window.opener这个指回父窗口的引用。两个窗口之间没有共同变量、没有网络服务器唯一的桥梁就是postMessage 消息信封。二、统一信封所有消息长一个样所有往来消息都遵循同一个信封结构类型写在type字段里{ type: INIT_SESSION, data: { sessionId: p1-high-01_1728600000000, examId: p1-high-01, suiteSessionId: null, timestamp: 1728600000000 } }sessionId由题目 ID 时间戳拼成见 examSessionMixin.js#L3853保证每次练习会话全局唯一——就像每张试卷盖一个流水号收分的时候不会张冠李戴。上图为练习窗口中真实出现的雅思图表题。你可以把它理解为子窗口里的考题而 postMessage 就是这张试卷交回主窗口的传送带。三、7 种消息一张表看懂通信协议消息类型方向作用REQUEST_INIT子 → 主我准备好了请给我会话号每 2 秒重发直到成功INIT_SESSION主 → 子下发sessionId、examId正式建连SESSION_READY子 → 主回执确认题目页已就绪父窗口把状态置为 activePRACTICE_COMPLETE子 → 主提交答案、正确答案对比与得分触发记录保存SUITE_NAVIGATE主 → 子套题模式下让同一窗口跳到下一篇SUITE_CLOSE_ATTEMPT子 → 主用户试图关闭套题窗口时的拦截上报SUITE_FORCE_CLOSE主 → 子套题结束主窗口下令解除保护、允许关闭子窗口对消息的监听与分发入口在 practice-page-enhancer.js#L1846-L1917主窗口的switch路由SESSION_READY→ 确认就绪、PRACTICE_COMPLETE→ 保存记录、REQUEST_INIT→ 补发初始化在 examSessionMixin.js#L2080-L2132。四、一次完整握手从点击到保存的六步 用打电话来理解整个流程开窗— 你点击练习入口主窗口调用openExam()examSessionMixin.js#L370用window.open打开题目页并记下这个窗口的引用装桥— 主窗口向子窗口注入数据采集脚本injectDataCollectionScriptexamSessionMixin.js#L1041呼叫— 子窗口页面加载后立刻发起REQUEST_INIT并每 2 秒重试一次practice-page-enhancer.js#L1921-L1947应答— 主窗口收到请求后下发INIT_SESSIONexamSessionMixin.js#L2288-L2296带上唯一sessionId确认— 子窗口停止重试回发SESSION_READY报告页面类型与标题practice-page-enhancer.js#L1879交卷— 你点击提交子窗口抓取答案并发送PRACTICE_COMPLETE主窗口接收后写入本地存储练习记录自动更新从按下按钮到成绩落库全程无需刷新、无需手动复制——这就是无缝的含义。五、通信断线怎么办三重容错设计新手最常问如果消息丢了会话不就卡死了这套协议的答案是不会2 秒重试心跳子窗口的REQUEST_INIT循环永不停歇只要有一条消息到达就握手成功丢几条都无所谓内联脚本兜底若脚本注入因网络/路径问题失败主窗口会改用内联脚本直接写进子窗口 DOM通信能力不降级跨域降级当浏览器同源策略禁止父窗口触碰子窗口文档时注入被优雅跳过此时只要题目页自带协议脚本就能独立发起REQUEST_INIT照常完成握手这正是协议文档 developer/doc/Wiki/Cross-Window-Communication-Protocol.md 中 Timeout and Error Handling 一节总结的设计思路宁可多打几个电话也不允许通话建不起来。六、套题模式同一扇门的接力赛普通练习是一窗一篇套题模式则是同一个窗口连续答 P1 → P2 → P3协议因此多了三条门规消息子窗口收到带suiteSessionId的INIT_SESSION后会拦截window.close()——用户误点关闭只会触发SUITE_CLOSE_ATTEMPT上报窗口安然无恙答完一篇主窗口发SUITE_NAVIGATE同一窗口原地跳转到下一篇窗口引用与会话状态全程不丢全部完成后主窗口发SUITE_FORCE_CLOSEsuitePracticeMixin.js#L2783解除守卫窗口才真正关闭并聚合三篇得分存为一条套题记录相关编排逻辑集中在 js/app/suitePracticeMixin.js更多细节可见 developer/doc/Wiki/Suite-Practice-Mode.md。七、新手排查指南成绩为什么没保存症状最可能的原因解决办法点击练习没开窗浏览器拦截了弹窗window.open失败允许站点弹窗后重试首次练习必做窗口正常但无记录子窗口协议脚本未加载或隐私模式禁用了存储查看控制台 postMessage/存储报错换 Chrome/Edge 稳定版复测file://下正常服务器下异常不同协议下浏览器数据互相隔离保持使用习惯一致需要时用导出数据迁移套题中途窗口被强杀守卫消息未送达进入降级保存路径系统会尽量保留已完成记录可在练习记录核对完整排查步骤参考 README.md 的常见问题章节。八、源码索引三分钟找到每一行模块路径职责主窗口会话js/app/examSessionMixin.js开窗、脚本注入、INIT_SESSION 发送、消息路由子窗口增强器js/practice-page-enhancer.js监听消息、重试循环、收集答案、发送完成消息套题编排js/app/suitePracticeMixin.js套题窗口守卫、导航、强制关闭协议文档developer/doc/Wiki/Cross-Window-Communication-Protocol.md消息清单、握手时序、容错策略全文会话生命周期developer/doc/Wiki/Practice-Session-Lifecycle--Management.md会话状态机与持久化 一句话总结IELTS Atlas 用 7 条标准化的 postMessage 消息、一个 2 秒重试的心跳和一套套题窗口守卫把两个互不共享内存的浏览器窗口拧成了一根可靠的传送带——你只管刷题成绩自己会回家。赞分享【免费下载链接】IELTS-practice雅思阅读与听力练习系统支持题库浏览、套题练习、成绩记录、错题分析、数据备份与本地题库导入。项目地址https://gitcode.com/gh_mirrors/ie/IELTS-practice点击查看免费下载相关推荐如何实现bspwm与EWMH协议的无缝兼容完整指南如何实现bspwm与EWMH协议的无缝兼容完整指南 bspwm是一款基于二进制空间分割的平铺窗口管理器以其轻量、高效和高度可定制性而受到Linux用户的青睐操作系统Xray窗口协议设计window_protocol.md中的跨进程通信规范Xray窗口协议设计window_protocol.md中的跨进程通信规范 协议概述解决跨进程通信的核心挑战 在基于Electron的现代文本编辑器中跨进开发工具告别窗口混战i3窗口管理器与文件管理器的无缝协作指南告别窗口混战i3窗口管理器与文件管理器的无缝协作指南 你是否经常在堆满窗口的桌面中迷失方向切换文件管理器和编辑器时是否需要反复AltTab本文将带你打造桌面应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
