一、同域(同一域名,同一端口,同一协议)下进行
1.iframe子页面和父页面相互获取元素
1.1子页面获取父页面元素
JS原生:window.parent.document.getElementById(‘元素id’)
Jquery:$("#id",parent.document)
1.2父页面获取子页面元素
JS原生:window.frames[iframe序号].document.getElementById(‘元素id’)
Jquery: $("#iframeID").contents().find("#元素id")
2.iframe子页面和父页面相互调用方法和变量
2.1子页面调用父页面方法和变量
window.parent.func() // 调用方法
window.parent.value //调用变量
2.2父页面调用子页面的方法和变量
window.frames[iframe序号].func //调用方法
window.frames[iframe序号].value //调用变量
父页面:
子页面:
效果:
二、跨域下进行
通过postMessage()方法来实现通信
https://blog.csdn.net/wen_j/article/details/105147608