同域
window.top返回顶层窗口，即浏览器窗口
父>子
//子页面
子>父
//在父页面
//在子页面
非跨域 父页面获取子页面元素操作
//原生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 目标窗口,* 代表所有;
//子页面
//父页面
//子页面
//父页面
父传子
//父页面
//子页面
//父页面
//子页面
//接受子数据
//父页面
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[]的区别
其中：
document.frames(“ifr_1”)可以得到一个window对象
document.frames[“ifr_1”]可以得到一个Html Element DOM对象