layui中弹出层的保存按钮绑定为iframe中表单的按钮

弹出层提交表单的js

layer.open({
	type : 2,
	title : '添加权限',
	area : [ '500px', '450px' ],
	offset : '160px',
	shadeClose : true, // 点击遮罩关闭
	btn : ['保存','取消'],
	content : 'permission_add.html',
	success : function(layero, index) { // 成功弹出后回调
		
	},
	yes : function(index, layero) { // 保存按钮回调函数
	    // 获取iframe层的body
	    var body = layer.getChildFrame('body', index);
	    // 找到隐藏的提交按钮模拟点击提交
	    body.find('#permissionSubmit').click();
	},
	btn2 : function(index, layero) { // 取消按钮回调函数
		layer.close(index); // 关闭弹出层
	}
});
	

弹出层表单中隐藏的提交按钮代码

<div class="layui-form-item" hidden>
    <div class="layui-input-block">
        <button id="permissionSubmit" class="layui-btn" lay-submit lay-filter="*">
        保存
        </button>
    </div>
</div>

iframe页面js内容

<script>
  // 初始化表单
  layui.use([  'form',  'layer'  ], function() {
    var  form = layui.form, layer = layui.layer,  $ =  layui.$;
    // 更新页面渲染，否则会造成页面加载元素不完整
     form.render();
    // 自定义表单验证
    form.verify({
      name : function(value, item) { // 验证功能名
        var  defaultName  = $('#defaultName').val(); // 默认的name
        if (value !== defaultName || 'default' === defaultName)  { // 判断功能名字是否发生改变
          if (!new RegExp("^[a-zA-Z0-9|\u4e00-\u9fa5\]{2,10}#34;)
              .test(value)) {
            return '权限名必须是2-10位中英文或者数字的字符';
          } else {
            code = 0; // 用来判断功能名是否存在
            $.ajax({
              type : 'POST',
              url  : 'queryNameIsExist.do',
              data : {
                name : value
              },
              async :  false,
              dataType : 'json',
              success  : function(data) {
                if (!data.success) { //  功能名已经存在
                  code = 1;
                }
              },
              error :  function(data) {
                code = 2;
              }
            });
            // 根据code判断角色名是否存在
            if (code ==  1) {
              return '功能名已经存在,请更换';
            } else if (code  == 2) {
              return '出现异常,请联系管理员';
            }
          }
        }
      },
      url  : function(value, item)  { // 校验功能url
        var  defaultUrl = $('#defaultUrl').val(); //  默认的url
        if (value !== defaultUrl ||  'default' === defaultUrl) {  // 判断功能url是否发生改变
          if (!new RegExp("^[a-zA-Z0-9/]{5,30}#34;).test(value)) {
            return 'url必须是5-30位英文和/组成的字符串';
          } else {
            code = 0; // 用来判断功能url是否存在
            $.ajax({
              type : 'POST',
              url  : 'queryUrlIsExist.do',
              data : {
                name : value
              },
              async :  false,
              dataType : 'json',
              success  : function(data) {
                if (!data.success) { //  功能url已经存在
                  code = 1;
                }
              },
              error :  function(data) {
                code = 2;
              }
            });
            // 根据code判断功能url是否存在
            if (code ==  1) {
              return '功能url已经存在';
            } else if (code  == 2) {
              return '出现异常,请联系管理员';
            }
          }
        }
      },
      permission : function(value, item) { //  校验权限字符串
        var  defaultPermission =  $('#defaultPermission').val(); // 默认的权限字符串
        if (value !== defaultPermission
            || 'default' !== defaultPermission)  { // 判断功能权限字符串是否发生改变
          if (!new RegExp("^[a-zA-Z0-9]{2,20}#34;).test(value))  {
            return '权限字符串必须是2-20位英文字符';
          } else {
            code = 0; // 用来判断功能权限字符串是否存在
            $.ajax({
              type : 'POST',
              url  : 'queryPermissionIsExist.do',
              data : {
                name : value
              },
              async :  false,
              dataType : 'json',
              success  : function(data) {
                if (!data.success) { //  功能权限字符串已经存在
                  code = 1;
                }
              },
              error :  function(data) {
                code = 2;
              }
            });
            // 根据code判断功能权限字符串是否存在
            if (code ==  1) {
              return '功能权限字符串已经存在';
            } else if (code  == 2) {
              return '出现异常,请联系管理员';
            }
          }
        }
      }
    });
 
    // 监听form表单提交
    form.on('submit(save)',  function(data) {
      $.ajax({
        type : 'POST',
        url  : 'createResource.do',
        data : {
          name : $('#name').val(),
          url  : $('#url').val(),
          type : $('input[name]:checked').val(),
          parentId : $('#parentId').val(),
          permission : $('#permission').val(),
          available :  $('#available').is(':checked') === true  ? 1  : 0
        },
        dataType : 'json',
        success  : function(data) {
          // 成功提示框
          parent.layer.msg('添加成功', {
            icon : 6,
          });
          parent.layer.closeAll('iframe'); //关闭弹框
        },
        error :  function(data) {
          // 异常提示
          parent.layer.msg('出现网络故障', {
            icon : 5
          });
          parent.layer.closeAll('iframe'); //关闭弹框
        }
      });
      return false;
    });
  });
</script>

我们只需要在保存按钮的回调函数中获取到iframe页面的隐藏的提交按钮然后使用click()事件就可以提交弹出iframe层的表单了，表单验证和表单提交都在iframe页面的js中，iframe页面的js中需要注意的是弹窗操作需要操作父页面的layer来进行

Tags：iframe使用

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。