page1 父页面
<div id="ifram" class="parent1"> <iframe frameborder="0" id="ifram1" name="ifram1" scrolling="auto" src="http://frontendg.com/site/ifram1" style="border: 1px solid #f00"></iframe> </div> <script> /*获取子页面元素(必须放到window.onload)*/ window.onload = function() { /*获取子页面元素*/ var cClass = $('#ifram1').contents().find("#ifram1").attr("class"); // console.log(cClass); /*获取子页面中子页面元素*/ var ccClass = $('#ifram1').contents().find("#ifram1_1").contents().find("#ifram1_1").attr("class"); // console.log(ccClass); /*调用子页面方法*/ var ifra = document.getElementById("ifram1"); // ifra.contentWindow.cMethod(); /*调用子页面中子页面的方法*/ ifra.contentWindow.document.getElementById("ifram1_1").contentWindow.ccMethod(); }; /*父页面方法*/ function pMethod() { alert('pMethod'); } </script>
page2 子页面
<div id="ifram1" class="child1"> ifram1 </div> <iframe frameborder="0" id="ifram1_1" name="ifram1_1" scrolling="auto" src="http://frontendg.com/site/ifram1_1" style="border: 1px solid #f00"></iframe> <script> var pClass = $('#ifram', parent.document).attr("class");/*父窗口元素*/ // window.parent.pMethod();/*调用父方法*/ /*子页面方法*/ function cMethod() { alert('cMethod'); } </script>
page3 子页面中的子页面
<div id="ifram1_1" class="child1_1"> ifram1_1 </div> <script> var pClass = $('#ifram', parent.parent.document).attr("class");/*父父窗口元素*/ // console.log(pClass); // window.parent.parent.pMethod();/*调用父父方法*/ /*子页面方法*/ function ccMethod() { alert('ccMethod'); } </script>