如何详细解释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 具有相同的协议，域，和端口，则称它们是同源的。
以下几个URL是同源的：
- site.com
- site.com/
- site.com/a/index.htm…
以下是不同源的：
- site.com
- bbs.site.com
- site.com:8080
- site.org
同源策略规定：
- 如果我们有对另一个窗口的引用（window.open || iframe），并且该窗口是同源的，那么我们就具有对该窗口的全部访问权限。见代码：2-1 、2-2
- 如果不是同源的，我们就不能访问窗口中的内容：变量，文档，任何东西。唯一例外是location：我们可以修改它，使用它进行重定向。但是我们无法读取 location 。因此，我们无法看到用户当前所处的位置，也就不会泄露任何信息。
iframe
iframe 标签承载了一个单独的嵌入的窗口，它有自己的 document 和 window
iframe.contentWindow 来获取 中的 window
iframe.contentDocument 来获取 中的 document ， 是 iframe.contentWindow.document 的简写。
当我们访问嵌入的窗口中的东西时，浏览器会检查 iframe 是否具有相同的源。如果不是，则会拒绝访问（对 location 进行写入是一个例外，它是会被允许的）。
代码 2-1 : （在 同源 情况下）
<!-- 1.html 内容 --> <!-- 127.0.0.1:8000/1.html --> <body> 我是 1.html, 下面嵌套 2.html <iframe src="127.0.0.1:8000/2.html" ></iframe> <script> function hello () { console.log('this is 1.html') } var iframe = document.getElementsByTagName('iframe')[0]; console.log('contentWindow
本文共计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 具有相同的协议，域，和端口，则称它们是同源的。
以下几个URL是同源的：
- site.com
- site.com/
- site.com/a/index.htm…
以下是不同源的：
- site.com
- bbs.site.com
- site.com:8080
- site.org
同源策略规定：
- 如果我们有对另一个窗口的引用（window.open || iframe），并且该窗口是同源的，那么我们就具有对该窗口的全部访问权限。见代码：2-1 、2-2
- 如果不是同源的，我们就不能访问窗口中的内容：变量，文档，任何东西。唯一例外是location：我们可以修改它，使用它进行重定向。但是我们无法读取 location 。因此，我们无法看到用户当前所处的位置，也就不会泄露任何信息。
iframe
iframe 标签承载了一个单独的嵌入的窗口，它有自己的 document 和 window
iframe.contentWindow 来获取 中的 window
iframe.contentDocument 来获取 中的 document ， 是 iframe.contentWindow.document 的简写。
当我们访问嵌入的窗口中的东西时，浏览器会检查 iframe 是否具有相同的源。如果不是，则会拒绝访问（对 location 进行写入是一个例外，它是会被允许的）。
代码 2-1 : （在 同源 情况下）
<!-- 1.html 内容 --> <!-- 127.0.0.1:8000/1.html --> <body> 我是 1.html, 下面嵌套 2.html <iframe src="127.0.0.1:8000/2.html" ></iframe> <script> function hello () { console.log('this is 1.html') } var iframe = document.getElementsByTagName('iframe')[0]; console.log('contentWindow