需求:需要使用iframe来实现添加新账号的功能,在iframe页面中通过表单提交新账号的资料后,关闭iframe页面,并且刷新父页面账号列表。

layer参考

layer独立组件官网:http://layer.layui.com/
layui文档:弹层组件文档

iframe层-父子操作子页面主要代码

1
2
3
4
5
6
//给父页面传值
$('#transmit').on('click', function(){
parent.$('#parentIframe').text('我被改变了');
parent.layer.tips('Look here', '#parentIframe', {time: 5000});
parent.layer.close(index);
});

问题

直接在iframe页面通过$('#transmit').on('click', function(){});来执行关闭及刷新操作,会造成本页面的form表单无法提交到后台,因此换用ajax来提交form表单,判断ajax提交成功/失败后,再进行父页面传值等操作。

代码实现

主要代码如下:

HTML相关代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form class="form-horizontal" id="myform">
<div class="box-body">
<div class="form-group col-sm-6">
<label for="inputAccount1" class="col-sm-4 control-label">微信号</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputAccount1" placeholder="微信号">
</div>
</div>
<div class="form-group col-sm-6">
<label for="inputAccount2" class="col-sm-4 control-label">手机号</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputAccount2" placeholder="手机号">
</div>
</div>
<div class="form-group col-sm-12">
<label for="inputAccount3" class="col-sm-2 control-label">二维码</label>
<div class="col-sm-10">
<a href="javascript:;" id="inputAccount3" class="upload">点击上传图片<input class="change" type="file" multiple="multiple" />
</a>
</div>
</div>
</div>
</form>

js相关代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="/js/jquery-2.2.3.min.js"></script>
<script src="/js/layer/layer.min.js"></script>
<script type="text/javascript">
var index = parent.layer.getFrameIndex(window.name);
//获取iframe父页面索引
$('form').submit(function() {
$.ajax({
url:"url",
type:"post",
data:$(this).serialize(),
success:function(data){
//console.log(data);
parent.location.reload(); //刷新父页面
parent.layer.close(index); //关闭当前页面,写在最后面
},
error:function(data){
//console.log("Error~");
//console.log(data);
parent.location.reload();
parent.layer.close(index);
}
});
});
</script>

Tips

关于layer弹层iframe窗的子父操作,parent.layer.close(index)这个关闭操作一定要写在最后面,大概是因为执行关闭执行,其他操作就不会执行了。

写在最后

参考文档1:layer弹窗iframe页面,关闭弹窗方法导致form表单无法提交到服务器
参考文档2:使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法