JavaScript中父页面Frame与子页面Frame之间页面元素的互相获取及方法的互相调用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012815136/article/details/82781721

一、JavaScript中父页面Frame与子页面Frame之间页面元素的互相获取及方法的互相调用

1. 父页面获取子页面元素

   // 格式：$("#iframe的ID").contents().find("#iframe中的控件ID")
   // 示例：iframeId 为 <iframe> 标签 id; buttonId 为子页面按钮 id
   $("#iframeId").contents().find("#buttonId").click();
   

2. 父页面调用子页面方法

   // 格式：$("#iframe的ID")[0].contentWindow.iframe方法();
   // 示例：iframeId 为 <iframe> 标签 id; myClickFun为子页面 js 方法
   $("#iframeId")[0].contentWindow().myClickFun();
   
   // 上面示例采用jQuery的API实现，如果需要使用原生js实现相应功能，如下
   // 格式：document.getElementById("iframe的ID").contentWindow.iframe方法();
   // 示例：iframeId 为 <iframe> 标签 id; myClickFun为子页面 js 方法
   document.getElementById("iframeId").contentWindow.myClickFun();
   

3. 子页面获取父页面元素

   // 格式：$("#父页面元素id", parent.document);
   // 示例：parentElementId 为父页面标签 id
   $("#parentElementId", parent.document).click();
   
   // 上面示例采用jQuery的API实现，如果需要使用原生js实现相应功能，如下
   // 格式：window.parent.document.getElementById("父窗口元素ID");
   // 示例：parentElementId为父页面标签 id
   window.parent.document.getElementById("parentElementId");
   

4. 子页面调用父页面方法

   // 格式：$(parent)[0].父页面方法
   // 示例：myParentFun 为父页面 js 方法
   $(parent)[0].myParentFun();
   
   // 上面示例采用jQuery的API实现，如果需要使用原生js实现相应功能，如下
   // 格式：parent.父页面方法
   // 示例：myParentFun 为父页面 js 方法
   parent.myParentFun();
   

二、参考资料

• jquery 父、子页面之间页面元素的获取，方法的调用