网页多标签页之间的通讯方式详解

网页多标签通讯 在现代前端工程师的职责中，开发页面只是其中的一部分。前端工程师需要具备多方面的技能，包括移动端、服务端等全流程的开发能力。因此，技术广度将决定前端工程师的稀缺性和未来的发展空间。本章将通过多个面试题，讲解前端面试常考的技术广度问题，涉及前端、移动端、服务端等全流程。 多标签页之间的通讯是前端工程师需要掌握的一项重要技能。常见的通讯方法有多种，包括WebSocket、localStorage、SharedWorker等。 WebSocket是一种实时通讯协议，允许服务器推送数据到客户端，实现实时通讯。WebSocket可以跨域通讯，但需要服务端参与。例如，在多标签页之间通讯时，使用WebSocket可以实现实时通讯。 localStorage是浏览器提供的一种存储机制，允许页面之间通讯。localStorage可以在同域的两个页面之间通讯，例如，在列表页和详情页之间通讯。使用localStorage可以实现页面之间的数据同步。 SharedWorker是Web Worker的一种，允许多个页面共享一个Worker。SharedWorker可以实现多个页面之间的通讯，例如，在多标签页之间通讯时，使用SharedWorker可以实现数据同步。 SharedWorker可以实现JS计算，并通过postMessage和onmessage与网页通讯。 在实际开发中，需要根据项目需求选择合适的通讯方法。例如，在需要实时通讯的场景下，可以使用WebSocket；在需要页面之间通讯的场景下，可以使用localStorage或SharedWorker。 此外，还有其他的通讯方法，例如，使用iframe通讯。在iframe通讯中，使用window.postMessage可以实现iframe之间的通讯。 多标签页之间的通讯是前端工程师需要掌握的一项重要技能。掌握多种通讯方法，可以满足不同的项目需求，提高开发效率和质量。 技术要点： * WebSocket：实时通讯协议，允许服务器推送数据到客户端。 * localStorage：浏览器提供的一种存储机制，允许页面之间通讯。 * SharedWorker：Web Worker的一种，允许多个页面共享一个Worker。 * iframe通讯：使用window.postMessage可以实现iframe之间的通讯。 考察重点： * 移动端相关支持 * HTTP 网路相关支持 * nodejs 相关支持 注意事项： * 不会从 0 基础讲起，基础不熟悉的可以提出问题。 * 考虑浏览器兼容性，不支持IE11。