• 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>
    If the copyright belongs to the longfei, please indicate the source!!!
  • 相关阅读:
    如何在SpringMVC中使用REST风格的url
    c#实现的udt
    数据库查询服务化-缓存和分页
    c#常用数据库封装再次升级
    c#数据库连接池Hikari重构升级
    c# 常用数据库封装
    聊聊数据存储查询
    c#分析SQL语句
    c# 分析SQL语句中的表操作
    c#最近博文结尾
  • 原文地址:https://www.cnblogs.com/longfeiPHP/p/12596873.html
Copyright © 2020-2023  润新知