layer子窗口与父窗口传值
layer作为优秀的jquery框架,可以用作弹出组件、日历、分页等,而且实现简单,只有几十k的大小。
此处给出弹出窗口时子窗口与父窗口的传值。js和css这里不展示引入(以下给出目录结构的图片),仅仅给出我测试的代码:
1 . index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="layer/skin/layer.css">
<script type="text/javascript" src="layer/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="layer/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: 'f.html?id=1'
});
});
$('#ne1').on('click', function(){
alert(rel);
});
});
function setRel(rel){
this.rel=rel;
}
function getRel(){
return rel;
}
</script>
</body>
</html>
f.html(子窗口)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="layer/skin/layer.css">
</head>
<body>
<p><input id="name"><button id="new1">改变父类元素</button></p>
<button id="new">关闭iframe</button>
<script type="text/javascript" src="layer/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<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>
转载自:https://blog.csdn.net/nima1994/article/details/51933850
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)