layer弹出⼦iframe层⽗⼦页⾯传值的⽅法
1. ⽗页⾯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>折扣管理</title>
<link rel="icon" type="image/x-icon" href="../images/Strawberry.png"/>
<link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
</head>
<body>
<div class="topContent">
<div class="title">折扣配置</div>
<div id="fatherTest"></div>
<div class="btn">新增折扣</div>
</div>
<div class="content">
<div class="form" id="form">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">城市⼤类</label>
<select name="city" lay-verify="">
<option value="">请选择⼀个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
<div class="layui-form-item">
<label class="layui-form-label">输⼊框</label>
<div class="layui-input-block">
<input type="text" name="title" required  lay-verify="required" placeholder="请输⼊标题" autocomplete="off"class="layui-input">                        </div>
</div>
</form>
</div>
</div>
<script src="../../../layui/layui.js"></script>
<script src="../../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
layui.use('form', function(){
var form = layui.form;
//监听提交
<('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
$('.btn').click(function(){
layer.open({
type: 2,//type: 2 为iframe层
title: '我是⼦页⾯',
shadeClose: true,
shade: 0.8,
area: ['60%', '50%'],
content: 'son.html' , //这⾥content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: ['sentsin', 'no']
btn: ['确定', '取消'] ,
yes:function(index,layero){
/*$(layero).find("iframe").eq(0).contents()；多个iframe层使⽤才使⽤eq ,
* 需要先到iframe，才能得到iframe⾥⾯的其他元素来进⾏传值取值
*/
//获取⼦页⾯元素 -- $("iframe").contents().find("⼦页⾯id名")
var father = $(layero).find("iframe").contents();
//到⽗页⾯中的第⼀个input传给⼦页⾯
var form = $('#form').find('input').eq(0).val();
father.find("#sonTest").html('⽗页⾯选择的值是---'+ form);
},
success:function(){
//调⽤⼦页⾯的⽅法 -- $('iframe')[0].contentWindow.⽅法名();
$('iframe')[0].contentWindow.funSon()
}
});
})
});
function funFather(){
alert('我是⽗页⾯的⽅法，我被调⽤了')
}
</script>
</body>
</html>
2.⼦页⾯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增折扣管理</title>
<link rel="icon" type="image/x-icon" href="../images/Strawberry.png"/>
<link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
</head>
<body>
<div class="topContent">
</div>
<div class="content">
<div id="sonTest"></div>
<div class="form" id="sonForm">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输⼊框</label>
<div class="layui-input-block">
<input type="text" name="title" required  lay-verify="required" placeholder="请输⼊标题" autocomplete="off"class="layui-input">                        </div>
</div>
<button id="define">点击传给⽗页⾯</button>
</form>
</div>
</div>
<script src="../../../layui/layui.js"></script>
<script src="../../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
layui.use('form', function(){
var form = layui.form;
//监听提交
jquery弹出div窗口('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
$('#define').click(function(){
var sonForm = $('#sonForm').find('input').val();
//获取⽗页⾯元素 -- $("⽗页⾯id名",window.parent.document)
$("#fatherTest",window.parent.document).html('⼦页⾯选择的值是' + sonForm);
//调⽤⽗页⾯的⽅法 -- parent.⽅法名();                parent.funFather();
});
function funSon(){
alert('我是⼦页⾯的⽅法，我被调⽤了')            }
</script>
</body>
</html>