layui中弹出iframe层时将弹出层的保存按钮绑定为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}$")
							.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}$").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}$").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来进行