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 相关文章推荐
12306验证码破解思路分享
Mar 25 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
vue数据初始化initState的实例详解
Apr 11 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
如何利用node转发请求详解
Sep 17 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
微信小程序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代码
2008/09/10 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
JS重载实现方法分析
2016/12/16 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
浅谈Python中数据解析
2015/05/05 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
YUV转为jpg图像的实现
2019/12/09 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
一封普通求职者的求职信
2013/11/20 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
股份转让协议书范本
2015/01/27 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书