关于iframe/子窗体与父窗体的交互

 

 

父子窗体交互方式

• 通过contentWindow交互
• 通过postMessage交互

 

通过contentWindow交互

主窗体内嵌的iframe或者是其通过js打开的新窗口都可以通过contentWindow与主窗体交互。所以首先需要获取到contentWindow才可以。要获取到可访问的contentWindow对象需要满足同源策略,这里需要保证两个窗口的域名完全相同才可以。也就是：

主窗体: http://test.example.com
子窗体: http://test.example.com
可以获取contentWindow

主窗体: http://father.example.com
子窗体: http://child.example.com
不能获取contentWindow

上面第二种情况我们可以通过设置document的domain属性来实现同域访问：

// 主窗体内的js
window.document.domain = example.com;

// 子窗体内的js
window.document.domain = example.com;

注意：domain属性的修改的限制，只能都去掉“子域名”（father，child）保留“主域名”（example）。

通过postMessage交互

这里大家可以通过mdn来获取相关的详细知识。
postMessage MDN

值得注意的点是：

1. iframe如果有change src的操作，那么它的contentWindow对象要在load以后获取才能正常调用postMessage方法。
2. 监听接收消息的时候，要注意判断信息来源，避免引起安全漏洞。