关于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. 监听接收消息的时候，要注意判断信息来源，避免引发安全漏洞。