前言:
经过一段时间测试,终于让我测试出来了通过window,top,本身传参,高兴之余立马记上,毕竟好记性不如烂笔头嘛,滑稽.png
1.首先创建一个 index.html 文件。代码附上。。。,太懒了,笑哭
目录
2. 在 index.html 文件中引入 layui.js,layu.css 文件。
index.html 中
<button class="layui-btn">弹窗</button>
方法一(父传子)
//定义一个方法,用于传给 iframe1 子页面
var _tools={
func1:function(){
console.log('func1');
}
}
_tools.func1();
window._tools=_tools;
layui.use(['layer','jquery'], function() {
var layer = layui.layer;
var $=layui.$;
该位置为上述代码位置....
//通过按钮触发弹窗
$("button").click(function(){
layer.open({
type: 2,
title: "弹窗1",
area: ["600px", "400px"],
shade: 0.4,
scrollbar: false, //禁止滚动条
resize: false, //禁止拉伸
maxmin: false, //最大化
content: "view/iframe1.html", //链接网页iframe
zIndex: layer.zIndex,
id: "iframe1",
success: function (layero, index) {
......
},
cancel:function(index,layero){
//获取打开的 iframe ID 和 name 【id 和 name 是相同的】,这一句是多余的
var iframe=window['layui-layer-iframe'+index];
> 重点:获取子页面传参的方法
> window:本身窗体,_load:iframe1 页面的方法名,func2():iframe1 页面的方法
window._load.func2();
//关闭页面
layer.close(index);
}
});
})
});
方法二(父传子)
在上述代码中的 success 中加入这么一行代码,这就是将数据传给打开的 iframe 页面。
重点:在打开的iframe1 中需要创建一个 child 方法
var iframe=window['layui-layer-iframe'+index];
var data={
name:'Andy',
age:30
};
iframe.child(data);
3. iframe1.html
iframe1.html 前端代码就看实际需求走了,关键是回传参数,下面的是 iframe1 的脚本。
- 方法一
//调用父页面方法
top._tools.func1();
var _load={
func2:function(){
console.log('1');
}
}
// load.func2(); 打开页面时输出1
> 重点:parent.window:指index.index父层 ._load :给父层一个方法
parent.window._load=_load;
- 方法二
function child(value){
console.log(value);
- 如果想将value回传给index 页面
可以参考方法一,需要 return,否则在index页面调用该方法时输出 underfind
var _load={
func2:function(){
return value;
}
}
}
4. 结果
此方法可适用于任何两层之间父子页面,在A(最底层 index.html),B(中间层 iframe1.html),C(最上层 iframe2.html)
三页面中 可B->C,C->B,A-B,B-A