如何详细解释Iframe实现跨窗口通信的原理？

本文共计710个文字，预计阅读时间需要3分钟。

目录 + 同源 + iframe + window.document.domain + iframe: 错误文档域冲突 + window.frames + sandbox + iframe 特性 + iframe 通信：postMessage + onmessage + 1 + postMessage + 2 + onmessage + 跨窗口的 cookie + 同源 + 同源策略会限制 + 窗口（window）和 iframe

目录

• 同源
• iframe
• window：document.domain
• iframe：错误文档陷阱
• window.frames
• “sandbox” iframe 特性
• iframe 通信：postMessage onmessage
• 1 postMessage
• 2 onmessage
• 跨窗口的 cookie

同源

同源策略会限制 窗口(window) 和 frame 之间的通信，因此首先要知道同源策略。

同源策略目的是保护用户信息免遭信息盗窃：加入小王有两个打开的页面：一个是 shop.com，一个是 email.com。小王不希望 shop.com 的脚本可以读取 mail 的邮件，这时同源策略就起作用了。

如果两个 URL 具有相同的协议，域，和端口，则称它们是同源的。