1. 程式人生 > >layui: 子iframe關閉/傳值/刷新父頁面

layui: 子iframe關閉/傳值/刷新父頁面

參數 frame put .get ddc 表單提交 parent rim area

https://www.cnblogs.com/jiqing9006/p/5135697.html

父層

<div class="col-xs-4 text-left" style="padding-left: 50px;"><button type="button" class="btn btn-success" onclick="addCategory();">添加</button></div>

  

點擊添加,按鈕,執行添加方法

function addCategory() {
    layer.open({
        title:‘<img src="{sh::RES}image/add.gif"> 添加分類‘,
        type: 2,
        area: [‘700px‘, ‘530px‘],
        fix: false, //不固定
        maxmin: true,
        content: ‘{sh::U("Mall/editcategory")}‘,
        success:function(layero,index){
        },
        end:function(){
            var handle_status = $("#handle_status").val();
            if ( handle_status == ‘1‘ ) {
                layer.msg(‘添加成功!‘,{
                    icon: 1,
                    time: 2000 //2秒關閉(如果不配置,默認是3秒)
                },function(){
                    history.go(0);
                });
            } else if ( handle_status == ‘2‘ ) {
                layer.msg(‘添加失敗!‘,{
                    icon: 2,
                    time: 2000 //2秒關閉(如果不配置,默認是3秒)
                },function(){
                    history.go(0);
                });
            }
        }
    });
}

  

這個方法,打開一個iframe頁面,頁面中可以執行一些操作,添加分類,執行完畢後調用一個end方法。這個方法,很有用!

不管執行結果如果,都會調用。

iframe可以傳遞參數到父頁面。

end方法,根據傳遞的結果,執行一些後續操作。

iframe層

<div class="content">
    <form action="" method="post" id="myform" enctype="multipart/form-data">
        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">名稱:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input type="text" class="form-control" id="name" name="name" placeholder="">
            </div>
        </div>

        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">類別:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input type="text" class="form-control" id="name" name="name" placeholder="">
            </div>
        </div>

        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">圖標:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input type="file" id="logo" name="logo">
            </div>
        </div>

        <div class="form-group row">
            <div class="left col-xs-3 text-right">
            <label for="">啟用:</label>
            </div>
            <div class="right col-xs-8 text-left">
            <input name="status" type="checkbox" checked="checked"> 啟用
            </div>
        </div>
        <div class="form-group text-center submit">
            <button type="submit" class="btn btn-primary ">提交</button>
        </div>
    </form>
    </div>

  

表單提交,提交到後臺(表單提交,刷新iframe層頁面)

<script type="text/javascript">
        var index = parent.layer.getFrameIndex(window.name);
        var success = ‘{sh:$success}‘;
        if ( success == ‘1‘ ) {
            parent.$("#handle_status").val(‘1‘);
              parent.layer.close(index);
        } else if( success == ‘2‘ ) {
            parent.$("#handle_status").val(‘2‘);
            parent.layer.close(index);
        }
    </script>

  

收到執行的結果,success,成功是1,失敗是2。執行相應的操作。也就是,

傳值+關閉iframe層。

父層有一個隱藏的元素,專門用來接收傳值的

<input id="handle_status" value="" hidden="hidden">

  

流程很清晰。

layer很牛逼!

layui: 子iframe關閉/傳值/刷新父頁面