top.$.jBox(“iframe: 类型弹框子页面调取父页面的方法及父页面获取子页面的值

你好龙卷风！！！

已于 2023-12-06 15:26:02 修改

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前台javaScript，jquery 文章标签： javascript 前端开发语言

于 2019-02-13 12:31:54 首次发布

本文链接：https://blog.youkuaiyun.com/zhaofuqiangmycomm/article/details/87170364

前台javaScript，jquery 专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了在使用jBox弹窗组件时，父页面如何调用子页面的方法及子页面如何调用父页面的方法。具体包括通过iframe进行通信的过程，如获取子页面的值、调用子页面的方法以及子页面触发调用父页面的方法。

参考

https://www.cnblogs.com/BlingSun/p/7484237.html

父页面和子页面都是jBox弹窗

父页面调用子页面的方法：

//父页面的弹窗方法 (注意id:"doctorListIframe",)

function seletDoctorList(){
        var url='${ctx}/zhong/doctor/list?isSelectTime='+"yesdd";
        top.$.jBox("iframe:"+url, {
            id:"doctorListIframe",
            title: "咨询师信息",
            width: 1150,
            height: 500,
            buttons :{'确定预约':1,'关闭':0},
            showSpeed : 'fast',
            submit:function(v,h,f){
                if(v == 1){
         // 获取子页面的值 listDoctorTime在子页面中是全局变量
          var listDoctorTime=h.find("#jbox-iframe")[0].contentWindow.listDoctorTime;
        //调用子页面的 tipFail()方法
         h.find("#jbox-iframe")[0].contentWindow.tipFail();
       
        //根据id获取子页面的值
        var queueCode=
         h.find("iframe")[0].contentWindow.document.getElementById("queueCode").value;
        var queueCode= 
        h.find("iframe")[0].contentWindow.document.getElementById("queueCode").value;
        //破编译器放一行都放不下格式乱七八糟的
            }

        }

    }

子页面调用父页面的方法

方式1：

子页面parent.fu();//子调用父页面的方法

var saveAndNewWorksheet=parent.document.getElementById("saveAndNewWorksheet");
		if(saveAndNewWorksheet!=undefined){//判断父元素是否存在
							  parent.fu();
		}

父页面：

父页面中定义有 fu方法

function fu(){

//逻辑处理

}

方式2：

在jBox生成父页面的时候定义 id:"worksheetForm",

function openW(url,title){
            console.log("open");
            $.jBox("iframe:"+url, {
                top:'5%',
				id:"worksheetForm",
                title: title,
                width: window.top.innerWidth*0.8,
                height: window.top.innerHeight*0.7,
                persistent: true,
                buttons :{},
                showSpeed : 'fast',
                closed: function () {
                    closeUpdate();
                }
            });
        }

截图是父页面的iframe_ID

子页面触发调用父页面的方法：

<input type="button" onclick="closeWin()" value="得到父页面的方法" />

var listDoctorTime=new Array;//初始化预约集合

function closeWin(listDoctorTime,reserveTimeIds,appRoom) {
           
    if(typeof  parent.frames[name="jbox-iframe-worksheetForm"].removeRButton
      === "function"){

        parent.frames[name="jbox-iframe-worksheetForm"].removeRButton();
    }
            parent.window.jBox.close();//关闭子页面的子页面

            
}