同域

window.top返回顶层窗口，即浏览器窗口

父>子

<button class="b" id="b">点击</button>
<iframe src="a.html" name='child' id="f"></iframe>
<script>
var ob=document.getElementById('b');
var msg='hellow,i'm your father!!'
ob.onclick=function(){
if(child.document.readyState=="complete"){
child.window.fnChild(msg); //关键
}
}
</script>

//子页面
<script>
function fnChild (arg) {
console.log(arg); //确实得到了 hellow,i'm your father!!
}
</script>

子>父

//在父页面
<div id="a" class="a"></div>
<iframe src="a.html" name='child' id="f"></iframe>

<script>
function changeColor(){
var oDiv=document.getElementById('a');
oDiv.style.backgroundColor="red";
}
</script>

//在子页面
<button class="ob" onclick="c()">anniu</button>
<script>
function c(){
parent.window.changeColor(); //关键
}
</script>

非跨域 父页面获取子页面元素操作

//原生js 获取子页面window对象

iframe不存在name和Id

1, var childWindow=document.getElementById("f").contentWindow;
var _div = childWindow.document.getElementById("ObjId")//iframe中的dom元素
2, var childWindow=document.getElementsByTagName('iframe')[0].contentWindow;
var ifm_document = childWindow.contentWindow.document;//iframe中的文档内容 document对象
var ifm_document = childWindow.contentWindow//window对象

iframe中有id或者name

document.frames['iframe-name'].document//iframe document对象

//其实也就是普通的获取方法,只是后面多了一个contentWindow;
//jquery
var childWindow=$('#f').contentWindow;

//获取子页面的document对象 (假设已经通过上面的方法得到了window对象)
var frameDoc=childWindow.document;
var frameBody=frameDoc.body;
//jquery 也是跟上面的一样
var frameDoc=$(childWindow.document);

//原生获取元素
childWindow.document.getElementById('a') //上面都已经拿到了子页面的window对象,所以获取子页面的元素也就只需要想普通操作那样获取就好
childWindow.document.getElementById('a').style.color='red' //改个颜色

//jq拿子页面元素
('#f').contents 这相当于拿到了iframe 里面所有的dom;

非跨域 子页面获取父页面元素

//原生js
window.parent.document.getElementById('a'); //window.parent获取到父页面的window对象,那么接可以使用一般操作获取元素
window.parent.document.getElementById('a').style.color="red";//dom操作
//jquery
(父页面元素选择器, parent.document);
(window.parent.document).find("#obgId")

postMessage

子传父

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
postMessage;
otherWindow.postMessage(message, targetOrigin, [transfer]);
//otherWindow 窗口对象
// message 传递的消息,可以是对象,可以是字符串
// target 目标窗口,* 代表所有;

//子页面
<div id="loginBox">登录窗口</div>
<div id="close"></div>

//父页面
<div id="loginMask">
<iframe src="子页面"></iframe>
</div>

//子页面
<script>
let oClose=document.getElementById('#close');
oClose.onclick=function(){
window.parent.postMessage('close','*');
}
</script>
//父页面
<script>
window.addEventListener('message',function(event){
if(event.data=='close'){
let oLoginMask=document.getElementById('loginMask');
oLoginMask.style.display="none";
}
})
</script>

父传子

//父页面
<button id="btn">传递消息</button>
<iframe id='f' src="子页面.html"></iframe>
//子页面
<div id="a"></div>

//父页面
<script>
let oBtn=document.getElementById('btn');
let oFrame=document.getElementById('f');
oBtn.onclick=function(){
oFrame.contentWindow.postMessage('hello','*');
}
</script>

//子页面
<script>
window.addEventListener('message',function(){
if(event.data=='hello'){
document.getElementById('#a').innerText=event.data;
}
})
</script>

//接受子数据
//父页面
window.addEventListener('message',function(event){
if(!event.data.param) return;
passParams = utils.getParamsFromGm(event.data.param)
console.log("passParams", passParams)
if ( passParams) {

        }
    })

//子页面
window.parent.postMessage('close','*');

document.frames('reportFrame').document 不是很了解，有两个document，其中document.frames('reportFrame')指的是你当前文档中一个name属性为'reportFrame'的frame的window对象（不是DOM对象），然后接一个".document"就取得了DOM对象，这个DOM对象就是你要查找frame中ID为reportFrameForm的DOM对象的context

$("#reportFrameForm",document.frames('reportFrame').document)
先解释document.frames('reportFrame').document 这句是原生态的javascript意思是.获取当前文档(document)里框架集(frames)里id/name为reportFrame的文档(最后的那个document)

jQuery语法:(选择器)这样,指从当前文档查询.如果指定了[待查文档]就从指定的待查文档里查询选择器.

$("#reportFrameForm" 的意思就是"找到id为reportFrameForm的DOM元素

$("#reportFrameForm",document.frames('reportFrame').document) 整句的意思就是:
从当前页面的名字为reportFrame的框架页面里找到id为reportFrameForm的元素.

---

大致可以猜出这句是操作嵌入页里的一个叫reportFrameForm的表单

document.frames()与document.frames[]的区别

<html>
<body>
<iframe id="ifr_1" name="ifr_1">
</iframe>
</body>
</html>
其中：
document.frames(“ifr_1”)可以得到一个window对象
document.frames[“ifr_1”]可以得到一个Html Element DOM对象