Home > Web Front-end > JS Tutorial > Detailed explanation of parent-child page examples in layer.js

Detailed explanation of parent-child page examples in layer.js

韦小宝
Release: 2018-03-12 10:03:06
Original
1858 people have browsed it

This article mainly shares with you examples of the father-child page of layer.js. We may have some knowledge about the father-child page. I hope this article can help everyone better understand the father-child page of layer.js.

layer is a web elastic layer component that has become popular in recent years. The official website address is: http://layer.layui.com/

You can download it from the official website Download the latest version.

When the layer pops up a new window (subpage) as an iframe layer, how to access the elements and functions of the parent page in the subpage.

1. Access parent page element value

    var parentId=parent.$("#id").val();//访问父页面元素值
Copy after login

2. Access parent page method

    var parentMethodValue=parent.getMethodValue();//访问父页面方法
Copy after login

3. How to close the pop-up sub-page window

    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
    parent.layer.close(index);//关闭弹出的子页面窗口
Copy after login

4. How to refresh the parent page from the sub-page

    parent.location.reload(); // 父页面刷新
Copy after login

layer.js pops up multiple <span style="font-size: 18px;">iframe</span>How to find the parent page method

Father page –

function aa() {
    var index = parent.layer.getFrameIndex(window.name);
    var iframeName = &#39;layui-layer-iframe&#39; + index;
    openDialog1(&#39;选择XXX&#39;, &#39;${ctx}/*****,&#39;800px &#39;, &#39;500px &#39;,iframeName);      
    }  &#39;
Copy after login
function openDialog1(title, url, width, height, target) {
    top.layer.open({
        type: 2,
        area: [width, height],
        title: title,
        maxmin: true,
        //开启最大化最小化按钮  
        content: url,
        btn: [&#39;确定&#39;, &#39;关闭&#39;],
        yes: function(index, layero) {
            var body = top.layer.getChildFrame(&#39;body&#39;, index);
            var iframeWin = layero.find(&#39;iframe&#39;)[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();  
            var inputForm = body.find(&#39;#inputForm&#39;);
            var top_iframe;
            if (target) {
                top_iframe = target; //如果指定了iframe,则在改frame中跳转  
            } else {
                top_iframe = top.getActiveTab().attr("name"); //获取当前active的tab的iframe   
            }
            inputForm.attr("target", top_iframe); //表单提交成功后,从服务器返回的url在当前tab中展示  
            if (iframeWin.contentWindow.doSubmit(top_iframe)) {
                top.layer.close(index); //关闭对话框。  

                top.window[iframeName].frames.location.reload(); //刷新父亲  
            }

        },
        cancel: function(index) {}
    });

}
Copy after login
    //子页面回调方法     
    function addRecord(name,chainName)
    {  
        alert(name);  
    }
Copy after login

child Page

function doSubmit(iframeName) {
    var sel = $("tbody tr td input.i-checks:checked");    var size = sel.size();    if (size == 0) {
        top.layer.alert(&#39;请至少选择一条数据!&#39;, {
            icon: 0,
            title: &#39;警告&#39;
        });        return false;
    } else {        for (var i = 0; i < size; i++) {
            top.window[iframeName].addRecord(sel[i].name, sel[i].value);
        }        return true;
    }
}
Copy after login

The above is the content of this article. Students who are not familiar with layer can take a look!

Related recommendations:

Explanation on assigning values ​​​​from layer sub-layers to parent layer page elements

The above is the detailed content of Detailed explanation of parent-child page examples in layer.js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template