layer多子页面弹出以及调用方法，变量

最新推荐文章于 2023-09-08 17:48:04 发布

willgrey

最新推荐文章于 2023-09-08 17:48:04 发布

阅读量738

点赞数

分类专栏： js 文章标签： layer

本文链接：https://blog.youkuaiyun.com/weixin_43735255/article/details/101422733

版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在一个父页面中如何通过iframe打开子页面，并在这些页面间进行JS通信的方法。展示了如何从父页面调用子页面的功能，以及子页面如何向父页面传递数据的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一个页面作为第二和第三两个子页面的parent

commonjs

function showModal(title, url, width, height) {
    if (url.indexOf("?") != -1) {
        url = baseUrl + url + "&lang" + lang;
    } else {
        url = baseUrl + url + "?lang" + lang;
    }
    layer.open({
        title: title,
        type: 2, 					// iframe
        content: [url],
        shade: [0.1, '#FFF'],		//
        resize: false,			//
        area: [width, height]
    });
}

第一个页面js
// 调用第二个页面

function showAddAccountNumber() {

    showModal(i18nLabel["addModal"], '/AccountNumber/addAccountNumberPage', '600px', '250px');
}
// 调用第三个页面
function showAdd(){
    var schoolId = $("#schoolId",frames[0].document).val();//取得第二个页面的值
    if(schoolId==null||schoolId==''){
        showMessage(i18nLabel["prompt"],$("#schoolIdText",frames[0].document).text()+i18nCheck["MSG_CHECK_DL_001"]);
        return;
    }
    layer.open({
        title: i18nLabel["addModal"],
        type: 2, 					// iframe层
        content: [ctx + '/AccountNumber/newTeacher?selected='+$("#idList",frames[0].document).val()+"&schoolId="+schoolId],//取得第二个页面的值
        shade: [0.1, '#FFF'],		// 遮罩层设置
        resize: false,			// 固定大小
        layerMore: true,
        area: ['800px', '500px']
    });
}

第二个页面js

function addIdList(val){
    if(val!=null&&val!=""){
        let idListStr = $("#idList").val() == '' ? val : $("#idList").val() + "," + val;
        $("#idList").val(idListStr);
        searchList();
    }
}

第三个页面js

function addCourse(){
    var selectChk = $(".listDiv .idChk:checked");
    if(selectChk.length == 0){
        showMessage(i18nLabel["prompt"], i18nMsg["MSG_F_EM_001"]);
        return;
    }
    var idList = new Array();
    for(var i = 0; i < selectChk.length; i++){
        idList[i]=selectChk[i].value;
    }
    parent.frames[0].addIdList(idList.join(','));//调用第二个页面的js方法
    parent.layer.close(parent.layer.getFrameIndex(window.name));
}

第一个页面打开第二个页面

<button onclick="showAddAccountNumber()" id="addButton" th:text="#{EM_ADD}">新增</button>

第二个页面打开第三个页面

<button onclick="parent.showAdd()"  th:text="#{EM_ADD}">新增</button>