本文介绍如何在JavaScript中实现iframe子页面与父页面的方法与变量互调。子页面通过window.parent访问父级上下文，父页面利用contentWindow定位子级窗口。文章提供了原生JS与jQuery两种实现方式的具体代码示例，涵盖函数调用、变量读取及DOM元素获取等常见场景。
子页面访问父页面资源
在Web开发中，经常需要处理iframe嵌入页面与父页面之间的通信。首先需要明确的是，子页面如何访问父页面的资源或执行操作。
子页面可以通过window.parent对象来定位到父页面的窗口上下文。一旦定位成功，后续的操作逻辑与直接在父页面中编写代码无异。具体而言，调用父页面的方法可使用window.parent.方法名()，而获取父页面的变量则直接引用window.parent.变量名即可。
window.parent.aa();//调取aa函数
window.parent.bb;//调取bb变量
例如：想在子页面中得到id为aaa的文本框的值
window.parent.$("#aaa").val();//这种写法的前提是引用了jquery
window.parent.getElementById("aaa").value; //js的写法父页面定位子页面窗口
相对地，父页面也需要能够访问子页面的内容，这通常涉及对子页面窗口的定位与交互。
父页面获取子页面引用的核心在于使用contentWindow属性。通过该属性，父页面可以获取到iframe元素所承载的子窗口对象，进而访问子页面中的脚本、变量或方法。
document.getElementById("childframe").contentWindow.childtest();
//调取子页面中的childtest方法 js的写法
var childWindow = $("#addFrame")[0].contentWindow;//获取子窗体中的对象
childWindow.formSubmit();//调取子页面的formSubmit方法 jquery的写法
//注释：其中 childframe和addFrame 都时iframe的id上述内容涵盖了JavaScript中iframe子父页面交互的基本原理与实现路径。掌握这些技巧有助于解决跨窗口通信问题，提升开发效率。