zoukankan      html  css  js  c++  java
  • 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!!!
  • 相关阅读:
    jupyter notebook 将当前目录设置为工作目录
    推荐个不错的服务器管理软件
    jupyter notebook 安装记录
    微软发布 Pylance:改善 VS Code 中的 Python 体验
    paddleocr安装笔记
    开源免费!7款服务器管理工具
    极简Linux下安装极简桌面
    解决 win7 win10 等 64位 支持access数据库问题
    泓格WINPAC主机与第三方模块rs 485 modbus rtu通信测试
    ajax
  • 原文地址:https://www.cnblogs.com/longfeiPHP/p/12596873.html
Copyright © 2011-2022 走看看