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;
//监听提交
form.on('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: ['http://sentsin.com', '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;
//监听提交
form.on('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>
浙公网安备 33010602011771号