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


Posted in Javascript onJune 25, 2019

定义标准接口

 

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

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

 /**
 * 父页面设置需要提供给子页面的接口函数
 * @param childWinId :要使用的子页面对应接口的id,该id需要与子页面中定义的id一致
 * @param functionName : 需要注册的回调函数名称,接口名称只能是Interface.ParentWin.funName中定义的名称
 * @param callbackFun :子页面数据向父页面更新数据时的回调函数,接口入参为js对象
 */
 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;
 }

 /**
 * 子页面调用父页面的接口函数
 * @childWinId :子页面定义的自身页面Id
 * @funcName : 需要调用的回调函数名称
 * @params : 需要传递的参数
 * @return :如果函数有返回值则通过其进行返回
 */
 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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>父页面</title>
  </head>
  <body>
    
    <script src="js/common.js"></script>
    <script>
      //传给子页面的值
      Interface.ParentWin.setFunForChild("data", Interface.ParentWin.funName.getDataFun, function() {
        return value;
      });
      
      //获取子页面函数并调用
      window.fun;
      Interface.ParentWin.setFunForChild("test",Interface.ParentWin.funName.updateDataFun,function(param){
        fun = param;
      });
      
      //调用
      var val = fun("1111");
      console.log(val);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>子页面</title>
  </head>
  <body>
    <script src="js/common.js"></script>
    <script>
      
      //父页面传入数据
      var data = Interface.ChildWin.callBack("data", Interface.ParentWin.funName.getDataFun); 
      console.log(data);
      
      //提供给父页面调用的函数
      Interface.ChildWin.callBack("test",Interface.ParentWin.funName.updateDataFun,function(data){
        alert(data);
        var str = "xxx";
        return str;
      });
      
    </script>
  </body>
</html>

总结

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

Javascript 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
一个网马的tips实现分析
Nov 28 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
微信小程序Echarts图表组件使用方法详解
Jun 25 #Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 #Javascript
ES6 Object属性新的写法实例小结
Jun 25 #Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 #Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 #Javascript
Node.js实现简单的爬取的示例代码
Jun 25 #Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
实例讲解React 组件
2020/07/07 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python实现简单的socket server实例
2015/04/29 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
小学生班会演讲稿
2014/01/09 职场文书
交通事故调解协议书
2014/04/16 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
关于读书的活动方案
2014/08/14 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers