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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
vue+element tabs选项卡分页效果
Jun 29 Javascript
VSCode搭建React Native环境
May 07 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
5个你不知道的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递归函数中使用return的注意事项
2014/01/17 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
webpack HappyPack实战详解
2019/10/08 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
有趣的python小程序分享
2017/12/05 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python实现批量命名照片
2020/06/18 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
商务考察邀请函范文
2014/01/21 职场文书
公司端午节活动方案
2014/02/04 职场文书
消防安全承诺书
2014/05/22 职场文书
离婚财产处理协议书
2014/09/30 职场文书
学前班语言教学计划
2015/01/20 职场文书
摩登时代观后感
2015/06/03 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书