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>

ifram父页面、子页面元素及方法的获取调用的相关教程结束。