JS 封装父页面子页面交互接口的实例代码

定义标准接口

Interface= {};
 Interface.ParentWin = {};
 Interface.ChildWin = {};

 
 Interface.ParentWin.funName = {
   getDataFun: "getDataFun", //子页面调用，提供给子页面的数据接口
   updateDataFun: "updateDataFun", //子页面调用，向父页面提交数据接口
   closeFun: "closeFun" //子页面需要关闭时，调用父页面的关闭窗口接口
 }

 
 Interface.ParentWin.setFunForChild = function(childWinId, functionName, callbackFun) {
   if (comm.isEmpty(childWinId)) {
     alert("没有为子页面调用接口定义对象Id");
     return;
   }
   //保存父页面提供给子页面调用的接口总对象
   if (comm.isEmpty(window.childCallbackObj)) {
     window.childCallbackObj = {};
   }
   //与指定子页面对应的回调接口对象
   var childCallbackObj = window.childCallbackObj;
   if (comm.isEmpty(childCallbackObj[childWinId])) {
     childCallbackObj[childWinId] = {};
   }

   var childObj = childCallbackObj[childWinId];
   if (!comm.isEmpty(childObj[functionName])) {
     alert("子页面" + childWinId + " 所需调用接口已存在" + functionName);
     return;
   }
   //检查接口是否为注册的接口
   for (var pro in Interface.ParentWin.funName) {
     if (Interface.ParentWin.funName[pro] == functionName) {
childObj[functionName] = callbackFun;
return;
     }
   }
   alert("子页面 " + childWinId + " 所需调用接口未注册：" + functionName + "。请检查接口定义声明对象。");
 }

 
 Interface.ChildWin.checkValid = function(childWinId, funName) {
   var parentWin = window.parent;
   var childCallbackObj = parentWin.childCallbackObj;
   if (comm.isEmpty(childWinId)) {
     alert("子页面调用接口定义对象Id不能为空！");
     return false;
   }
   if (comm.isEmpty(childCallbackObj)) {
     alert("父页面调用接口定义的对象不存在");
     return false;
   }
   var childObj = childCallbackObj[childWinId];
   if (comm.isEmpty(childObj)) {
     alert("子页面调用接口定义的对象不存在");
     return false;
   }
   if (comm.isEmpty(childObj[funName])) {
     alert("父页面调用接口定义不存在:" + funName);
     return false;
   }
   return true;
 }

 
 Interface.ChildWin.callBack = function(childWinId, funcName, params) {
   if (!Interface.ChildWin.checkValid(childWinId, funcName)) {
     return;
   }

   var parentWin = window.parent;
   var childObj = parentWin.childCallbackObj[childWinId];
   return childObj[funcName].call(parentWin, params);
 }

demo



  
    
    
  
  
    
    
    
  




  
    
    
  
  
    
    
  

总结

以上所述是小编给大家介绍的JS 封装父页面子页面交互接口的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！