JS 封装父页面子页面交互接口的实例代码
定义标准接口
Interface={};
Interface.ParentWin={};
Interface.ChildWin={};
/**
*父页面提供的标准接口函数名称
*/
Interface.ParentWin.funName={
getDataFun:"getDataFun",//子页面调用，提供给子页面的数据接口
updateDataFun:"updateDataFun",//子页面调用，向父页面提交数据接口
closeFun:"closeFun"//子页面需要关闭时，调用父页面的关闭窗口接口
}
/**
*父页面设置需要提供给子页面的接口函数
*@paramchildWinId：要使用的子页面对应接口的id，该id需要与子页面中定义的id一致
*@paramfunctionName：需要注册的回调函数名称，接口名称只能是Interface.ParentWin.funName中定义的名称
*@paramcallbackFun：子页面数据向父页面更新数据时的回调函数,接口入参为js对象
*/
Interface.ParentWin.setFunForChild=function(childWinId,functionName,callbackFun){
if(comm.isEmpty(childWinId)){
alert("没有为子页面调用接口定义对象Id");
return;
}
//保存父页面提供给子页面调用的接口总对象
if(comm.isEmpty(window.childCallbackObj)){
window.childCallbackObj={};
}
//与指定子页面对应的回调接口对象
varchildCallbackObj=window.childCallbackObj;
if(comm.isEmpty(childCallbackObj[childWinId])){
childCallbackObj[childWinId]={};
}
varchildObj=childCallbackObj[childWinId];
if(!comm.isEmpty(childObj[functionName])){
alert("子页面"+childWinId+"所需调用接口已存在"+functionName);
return;
}
//检查接口是否为注册的接口
for(varproinInterface.ParentWin.funName){
if(Interface.ParentWin.funName[pro]==functionName){
childObj[functionName]=callbackFun;
return;
}
}
alert("子页面"+childWinId+"所需调用接口未注册："+functionName+"。请检查接口定义声明对象。");
}
/**
*检查指定的子页面调用接口是否存在
*/
Interface.ChildWin.checkValid=function(childWinId,funName){
varparentWin=window.parent;
varchildCallbackObj=parentWin.childCallbackObj;
if(comm.isEmpty(childWinId)){
alert("子页面调用接口定义对象Id不能为空！");
returnfalse;
}
if(comm.isEmpty(childCallbackObj)){
alert("父页面调用接口定义的对象不存在");
returnfalse;
}
varchildObj=childCallbackObj[childWinId];
if(comm.isEmpty(childObj)){
alert("子页面调用接口定义的对象不存在");
returnfalse;
}
if(comm.isEmpty(childObj[funName])){
alert("父页面调用接口定义不存在:"+funName);
returnfalse;
}
returntrue;
}
/**
*子页面调用父页面的接口函数
*@childWinId：子页面定义的自身页面Id
*@funcName：需要调用的回调函数名称
*@params：需要传递的参数
*@return:如果函数有返回值则通过其进行返回
*/
Interface.ChildWin.callBack=function(childWinId,funcName,params){
if(!Interface.ChildWin.checkValid(childWinId,funcName)){
return;
}
varparentWin=window.parent;
varchildObj=parentWin.childCallbackObj[childWinId];
returnchildObj[funcName].call(parentWin,params);
}
demo
父页面
子页面
总结
以上所述是小编给大家介绍的JS封装父页面子页面交互接口的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！