iframe通信相关:父操作子,子操作父,兄弟通信

这里写window和document是认为代表了BOM和DOM(个人理解不一定对)

拿到了window就能操作全局变量和函数

拿到了document就能获取dom,操作节点

 

父操作子

window:选择器.contentWindow

document:选择器.contentWindow.document

1  // 父页面里面写选择器获取到iframe元素,通过contentWindow获取到子页面的window,然后操作变量或函数
2  document.getElementById().contentWindow.childrenFunction()
3 
4 // 父页面选择器                                    通过子页面选择器操作dom
5  document.getElementById().contentWindow.document.getElementById().innerText = xxx

 

子操作父

window:parent.window

document:parent.document

1   // 拿到父页面的window,调用父页面的函数
2   parent.window.parentFunction()
3 
4   // 拿到父页面的document,操作父页面的dom
5   parent.document.getElementById().innerText = xxx

 

兄弟通信(通过父级间接操作)

window:parent.选择器(目标iframe).contentWindow
document:parent.选择器(目标iframe).contentWindow.document
 
 
基于子父级通信
兄弟通信就是先向上找到父级,父级再选择目标iframe,然后再进行操作
 
posted @ 2019-11-07 19:03  Web初心  阅读(782)  评论(0编辑  收藏  举报