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>