iframe嵌套，父子页面之间变量，方法，元素的相互调用使用介绍

子页面：<iframe id="XXX" scrolling="auto" frameborder="0" width="100%" height="570px" src="XXX"> </iframe>

父页面取子页面的全局变量：  var 变量名称= document.getElementById('XXX').contentWindow.变量名称;
父页面调子页面的方法：

$("#XXX")[0].contentWindow.子页面方法名();

或  document.getElementById("XXX").contentWindow.子页面方法名();

父页面获取子页面的元素:

$("#XXX").contents().find(".mycontainer")//获取的是元素。

或 $(window.frames["XXX"].contentDocument.documentElement).find(".mycontainer")

window.frames["XXX"].contentDocument.getElementsByClassName("mycontainer")

document.getElementById('XXX').contentWindow.document.getElementsByClassName("mycontainer")

 

子页面调用父页面的全局变量：

  parent.父页面全局变量名;//获取父页面的全局变量
  parent.父页面的全局变量=值;//为父页面的变量赋值

子页面调用父页面方法：

     parent.父页面方法名();

子页面获取父页面的元素：

window.parent.$(父页面内的元素选择器或id)//获取的是元素；

或

①window.parent.document.getElementById("父页面元素ID");
②window.parent.document.getElementsByTagName("父页面元素标签名")[i];
③window.parent.document.getElementsByClassName("父页面元素类名")[i];