• 当前页面怎么调用子集iframe页面的方法


    我这里要实现的效果是子集iframe页面点击背景那个头像旁边的一个取消按钮要跳出这个模态框,这个模态框HTML在当前页面也就是子页面iframe的母级页面,取消按钮在子集iframe里面上面有个enterOut(),所以问题来了,怎么去实现(当前是妈妈,要点击右边儿子是iframe里面那个取消按钮实现弹出模态框效果)

    <div id="hz_qxalert1_id" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; display: block; 100%; height: 100%; background: rgba(0, 0, 0, 0.701961);">
    <div id="hz_qxalert1_id_next" style=" 400px; height: 203px; padding: 0px 0px 20px; position: absolute; top: 77px; left: 484px; z-index: 500; border: 1px solid rgb(22, 138, 187); border-radius: 5px; overflow: hidden; display: block; background: rgb(255, 255, 255);">
    <p style="padding: 0 0 0 28px;text-align: left; height:50px; line-height:50px; z-index: 500;">消息会诊</p>
    <hr style="border-color:#ccc; 80%;margin: 0 auto;">
    <p class="alert_text" style="height: 80px; line-height:80px; z-index: 500;text-align: center;">您将取消会诊,确认取消会诊吗?</p>
    <button onclick="enterOut()" class="btn1" style=" z-index: 500;height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px; 89px;margin-left: 185px;">是</button>
    <button class="btn1" style="height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px; 89px; z-index: 500;">否</button>
    </div>
    </div>

    上图是当前页面一个id为hz_qxalert1_id的模态框和一个class为box的div,

    然后box里面套了一个content类

    这里是当前页面所套的ifreme我们先找它的ID找到了 才能解决一系列问题哦

    子集iframe这样写

    function son{

    //让父级的模态框遮罩层显示出来
    parent.document.getElementById('hz_qxalert1_id').style.display = "block";

    //获取遮罩层的宽、高
    var modelWidth = self.parent.$('#hz_qxalert1_id').width();
    var modelHeight= self.parent.$('#hz_qxalert1_id').height();

    //获取取消会诊确认框的宽、高
    var alertWidth = self.parent.$('#hz_qxalert1_id_next').width();
    var alertHeight= self.parent.$('#hz_qxalert1_id_next').height();

    //让取消会诊确认框相对于模态框居中
    parent.document.getElementById('hz_qxalert1_id_next').style.left = (modelWidth-alertWidth)/2+"px";
    parent.document.getElementById('hz_qxalert1_id_next').style.top = (modelHeight-alertHeight)/2+"px";

    //让取消会诊的确认框显示出来
    parent.document.getElementById('hz_qxalert1_id_next').style.display = "block";
    //这里下面这句就可以找到第一个iframe啦然后赋值哦
    var content_inner_iframe_id = parent.$('.content_inner').children('iframe:eq(0)').attr('id');
    parent.myIframeId = content_inner_iframe_id;
    console.log(content_inner_iframe_id);

    }

    然后在当前(母级)页面写这样一个方法

    function enterOut(){

    //隐藏取消会诊消息模态框
    document.getElementById('hz_qxalert1_id').style.display = "none";

    //隐藏取消会诊消息框
    document.getElementById('hz_qxalert1_id_next').style.display = "none";

    //执行取消会诊事件(拿到子级写好的id这里当前页面直接拿来然后调用没毛病)
    var childrenFun = document.getElementById(myIframeId).contentWindow;
    childrenFun.enterOut();
    }

  • 相关阅读:
    从 PHP 到 Java
    用Lua定制Redis命令
    见招拆招-PostgreSQL中文全文索引效率优化
    通过2-3-4树理解红黑树
    代码迁移之旅(二)- 渐进式迁移方案
    多线程编程
    Gotorch
    使用PostgreSQL进行中文全文检索
    代码重构之旅(一) 项目结构
    Linux“体检”指标
  • 原文地址:https://www.cnblogs.com/hjptopshow/p/6859999.html
Copyright © 2020-2023  润新知