layui的layer父子弹层之间的方法调用和传值

最新推荐文章于 2023-06-29 10:52:52 发布

都旭宝

最新推荐文章于 2023-06-29 10:52:52 发布

阅读量2.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/douxubao/article/details/107525738

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、访问父页面元素值

var parentId=parent.$("#id").val();//访问父页面元素值

2、访问父页面方法

var parentMethodValue=parent.getMethodValue();//访问父页面方法

3、如何关闭弹出的子页面窗口

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
parent.layer.close(index);//关闭弹出的子页面窗口

4、如何从子页面执行刷新父页面操作

parent.location.reload(); // 父页面刷新

例子
父页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<script src="layui/layui.js"></script>
	</head>
	<body>
		1111
		<button type="button" class="layui-btn" id="btn">一个标准的按钮</button>
		
		<script>
			layui.use(['jquery','table','layer'], function() {
				var table = layui.table;
				var layer=layui.layer;
				var $ = layui.$;
				$("#btn").click(function(){
				 layer.open({
				   type: 2,
				   content: 'child.html',
				   success: function(layero, index){
				     var body = layer.getChildFrame('body', index);
				     var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
				     console.log(iframeWin) //得到iframe页的body内容
				     body.find('input').val('Hi，我是从父页来的')
					 iframeWin.child1();
					
				   }
				 }); 
				});
				
				

				});
				function do2() {
					layer.msg("22222");
				
				}
		</script>
	</body>
</html>

子页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<script src="layui/layui.js"></script>
	</head>
	<body>
		<input type="" name="" id="input" value="" />
		<script>
			layui.use(['table', 'layer'], function() {
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.$;
				$("#input").click(function(){
					
					parent.do2();		
			});
			});
			function child1() {
				layer.msg("child1111");
			
			}
		</script>
	</body>
</html>

都旭宝

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
layui的layer父子弹层之间的方法调用和传值

1、访问父页面元素值var parentId=parent.$("#id").val();//访问父页面元素值 2、访问父页面方法var parentMethodValue=parent.getMethodValue();//访问父页面方法 3、如何关闭弹出的子页面窗口var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(index);//关闭弹出的子页面窗口 4、如何从子页
复制链接

扫一扫