關於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. 監聽接收消息的時候，要注意判斷信息來源，避免引發安全漏洞。