ifram父页面、子页面元素及方法的获取调用

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>