跨窗口通信 同源 同源策略会限制 窗口(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, 下面嵌套 2.html 我是 2.html <script>
function hello () { console.log('this is 2.html') }
</script>
iframe.onload vs iframe.contentWindow.onload
iframe.onload 事件(在 标签上)与 iframe.contentWindow.onload(在嵌入的 window 对象上)基本相同。当嵌入的窗口的所有资源都完全加载完毕时触发。
……但是,我们无法使用 iframe.contentWindow.onload 访问不同源的 iframe。因此,请使用 iframe.onload。
window:document.domain 但是,如果窗口的二级域相同,例如 bbs.site.com,nav.site.com 和 site.com(它们共同的二级域是 site.com),我们可以使浏览器忽略该差异,使得它们可以被作为“同源”的来对待,以便进行跨窗口通信。
为了做到这一点,每个这样的窗口都应该执行下面这行代码:
document.domain = 'site.com'; 这样就可以了。现在它们可以无限制地进行交互了。但是再强调一遍,这仅适用于具有相同二级域的页面。
已弃用,但仍有效
document.domain 属性正在被从 规范 中删除。跨窗口通信(下面将很快解释到)是建议的替代方案。
也就是说,到目前为止,所有浏览器都支持它。并且未来也将继续支持它,而不会导致使用了 document.domain 的旧代码出现问题。
代码 2-1 : (在 不同源 情况下)注意端口
我是 1.html, 下面嵌套 2.html