layui.layer子页面访问父页面元素与函数的实现方法
本文详解在layui.layer iframe弹出层中,子页面如何通过parent对象访问父页面的DOM元素及调用JS函数。涵盖content、success等关键参数用法,并提供完整的父子页面交互代码示例及注意事项,帮助开发者实现子页面对父页面的内容修改与状态控制。
当使用layui.layer以iframe类型打开新窗口(即子框架或子页面)时,如何在子页面中获取并操作父页面的元素与函数,进而更新父页面显示内容,从而为用户提供流畅自然的操作体验,是前端开发中常见的需求。
一、layer.open() 关键参数解析
content - 内容配置
content参数的取值具有高度灵活性,既支持传入普通HTML字符串,也支持指定具体的DOM节点,其具体表现还会随着type参数的不同而有所差异。
/!*
如果是页面层
*/
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意,如果str是object,那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
}); success - 层弹出后的成功回调方法
若需在层创建完成后立即执行特定逻辑,可通过配置该回调函数实现。success回调会接收两个参数:当前层的DOM对象以及当前层的索引值。
layer.open({
content: '测试回调',
success: function(layero, index){
console.log(layero, index);
}
});yes - 确定按钮回调方法
该回调同样携带两个参数,分别为当前层的索引值以及当前层的DOM对象。
layer.open({
content: '测试回调',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调,需进行手工关闭
}
}); 二、在子页面中操作父页面的常用JS代码
// 1、访问父页面元素值
parent.$("#id").val();
// 2、访问父页面方法
parent.getMethodValue();//访问父页面方法
// 3、如何关闭弹出的子页面窗口
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);//关闭弹出的子页面窗口
// 4、如何从子页面执行刷新父页面操作
parent.location.reload(); 三、子页面修改父页面内容的完整代码示例
父页面代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父页面</title>
<link rel="stylesheet" type="text/css" href="layer.css" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="layer.js"></script>
</head>
<body>
<p id="parentIframe">实例</p>
<button id="ne1">查看变量</button>
<button id="ne">打开iframe</button>
<script type="text/javascript">
var rel="原始变量";
$(function(){
$('#ne').on('click', function(){
layer.open({
type: 2,
area: ['500px', '300px'],
maxmin: true,
content: 'test.html'
});
});
$('#ne1').on('click', function(){
alert(rel);
});
});
function setRel(rel){
this.rel=rel;
}
function getRel(){
return rel;
}
</script>
</body>
</html> 子页面代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
<link rel="stylesheet" type="text/css" href="layer.css" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="layer.js"></script>
</head>
<body>
<p><input id="name"><button id="new1">改变父类元素</button></p>
<button id="new">关闭iframe</button>
<script>
$(function(){
var str=window.location.href;
$("#name").val(str.split('?')[1]);
$('#new').on('click', function(){
var index = parent.layer.getFrameIndex(window.name);
parent.setRel("子类传值");
parent.layer.close(index);
});
$('#new1').on('click', function(){
parent.$('#parentIframe').text($("#name").val());
});
});
</script>
</body>
</html> 注意事项:
1、请将父页面代码中的‘test.html’替换为你实际使用的子页面路径地址
2、需从官方渠道下载layer.js文件
3、确保jquery库的引用代码位于layer.js之前加载
至此,关于layui.layer弹出层(子页面)如何访问并改变父页面内容及函数的介绍完毕。如需了解更多layer子页面访问父页面元素和函数的相关内容,建议搜索本站历史文章或继续浏览后续相关文章,感谢大家的支持!
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
JS对象数组转字符串为什么推荐用JSON.stringify()
2026-11-05 09:40:31
