今天在写一个模块,里面有一个功能是在弹出的子页面中输入一些数据,然后在点击确认之后关闭子页面,把输入的这些数据再回显到之前的父页面上面。这里是用layer弹层组件,弹出一个iframe页面做的。研究了很久才弄明白。
如下父页面的相关代码
//父页面
//click事件点击进入一个iframe页面(子页面)
$(".relation").click(function() {
// 是否是指派页面
window.IspPoint = false;
parent.layer.open({
type : 2,//弹窗类型 ['dialog', 'page', 'iframe', 'loading', 'tips']
area : [ '610px', '320px' ],
shift : 2,//可选动画类型0-6
scrollbar : false,
title : false,
closeBtn : false,
content : "address.html",
btn: ['确定','取消'],
//这里yes:function为设置的第一个按钮的function,后面设置的按钮默认点击关闭
yes:function(index,layero){
//需要回显的值
//layero为当前的DOM对象,去找打开的iframe转成DOM对象调用子页面其中的function (callbackdata)
var res = $(layero).find("iframe")[0].contentWindow.callbackdata();
//把回显的值赋给需要显示的地方
$("#name").val(res.data_name);
$("#id").val(res.data_id);
//关闭子页面
parent.layer.close(index);
});
如下子页面的相关代码
/*子页面 回显data */
var callbackdata = function () {
var id = "";
var name = "";
//我这里循环拿取li列表的data中所有name和id
for(var z = 0 ;z< length ;z++){
if(0 != z){
pk += ",";
name += ",";
}
name = name + $('.address-right').find('li').eq(z).data('name');
id = id + $('.address-right').find('li').eq(z).data('id');
}
//data里面可以存放很多需要回显的数据,在父页面调用这个function即可拿到data里面的数据达到回显的效果
data ={
data_name : name,
data_id : id
};
//function返回一个data值,达到回显数据效果
return data;
}