layer iframe

1. iframe父子操作
2.layer.open() + iframe + form: 回调操作
3.layer.open + iframe + form： 数据传递
4.<iframe> + form：数据反填, 表单反填数据失败

1. iframe父子操作

2.layer.open() + iframe + form: 回调操作

3.layer.open + iframe + form： 数据传递

4.<iframe> + form：数据反填, 表单反填数据失败

1. iframe父子操作

// 获取父页面的值给子页面
var body = layer.getChildFrame('body', index);     //获取子页面的body元素
body.find('#id').val(data.id);        //为子页面id为id的元素赋值


// 在子页面关闭弹出层
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭   


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

//如何从子页面执行刷新父页面操作
parent.location.reload();     // 父页面刷新

2.layer.open() + iframe: 回调操作

父层页面  调用弹框：

$(".header .head_r .psd").click(function(){

     $(".userpop").hide();

     $(".head_r_user").removeClass("active");

     layer.open({

          title: "修改密码",

          type: 2,

          area: '422px',

          maxmin: true,

          fix: true,

          shadeClose: false, //点击遮罩关闭层

          content: 'pop_modifypsd.html'  

     });

})

子页面：

layui.use(['jquery','layer'], function(){

       var $ = layui.jquery,

       layer = layui.layer;

       

       var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引     

       parent.layer.iframeAuto(index);                      // 窗口大小自适应

       //给父页面传值

       $('#cancle').on('click', function(){

           parent.layer.close(index);

       });

       //关闭iframe

       $('#closeIframe').click(function(){

              changePassword();

       });      

})

//修改密码

function changePassword(){

       var old_psw = $("#ori_password").val();

       var new_psw = $("#new_password").val();

       if (new_psw != $("#confirm_password").val()) {

              parent.layer.msg("新密码与确认密码输入不一致");

              return;

       }

       var regex = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,50}$');

       if(!regex.test(new_psw)){

              parent.layer.msg("密码应为8位以上的数字和字母组合！");

              return;

       }

       $.ajax({

              url : "../../user/changePassword",

              type : "POST",

              asyc : "false",

              data : {

                      new_psw : sha256_digest(new_psw),

                      old_psw : sha256_digest(old_psw)

              },

              success : function(data) {

                      if (data.ret.succeed) {

                             parent.layer.msg('您将标记 [ ' +mobile + ' ] 成功传送给了父窗口');

                     parent.layer.close(index);

                             parent.layer.msg(data.ret.retMsg, {

                                    icon : 1

                             });

                      } else {

                             parent.layer.msg(data.ret.retMsg);

                      }

              }

       });

}

 

 

3.layer.open + iframe + form： 数据传递

问题描述：父页面通过layer.open 打开 iframe页面，传入参数，iframe页面取值失败

解决办法：setTimeout

setTimeout(function(){
    var data = $("#data").val();
    data = data ? JSON.parse($("#data").val()) : data;
    // 根据表单类型生成不同表单内容  默认生成投诉案例
    base.creatReport($);
    if(data && data.formstyle == 1) base.creatArbitrate($);     
    form.val("formCase", data);
},100)

这里引用window.onload，$(function(){}) 是无效的，依然取不到值；

原因：layer.open打开iframe页面, iframe页面因为每次打开重新生成DOM，所以直接赋值给iframe页面不成功，需要等待页面加载完再赋值。

4.<iframe> + form： 数据反填

<iframe src="iframe_case.html" id="iframe" nme="iframe" frameborder="0"></iframe>

document.getElementById("iframe").contentWindow.loadData($,form,base,laydate,data);

function loadData($,form,base,laydate,data){
    ....
}

 

问题描述：通过iframe打开页面，页面内部分元素动态生成，form表单反填数据无效 

解决办法：form 需要是当前页面layui.use导入的才可以，不可以通过上一个页面参数形式传递

document.getElementById("iframe").contentWindow.loadData($,base,laydate,data);



var form = null;

layui.use(['jquery','layer','element','form','laydate'], function(exports){

    form = layui.form

});

// 更新按钮 弹出案例 反填数据方法

function loadData($,base,laydate,data){

    var data = {...}

    form.val("lay-filter", data);

}

 

 

 

 

 

 

 

 

                      });