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

定义标准接口

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 封装父页面子页面交互接口的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • php写app接口并返回json数据的实例(分享)

    第一步:conn.PHP文件,用于连接数据库并定义接口格式,代码如下: <?php header("charset=utf-8"); $servername="localhost"; $username="root"; $password="root"; $dbname="test"; $conn = mysql_connect($servername,$username,$password); if

  • 浅谈微信JS-SDK 微信分享接口开发（介绍版）

    本文主要是分享自己的开发过程,希望能给部分存在同样问题的朋友一点点帮助: 最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息,后经过排查发现是微信版本升级导致,采用js-sdk完成分享接口,为了快速实现该功能效果,于是我打算通过前台js进行实现来看看分享效果. 通过查看微信公众平台文档,找到自己所需要的说明文档,明确开发步骤,说明文档截图如下: 开发步骤: 1.按照说明文档完成步骤1.1.1 2.引入js文件 在分享的页面中添加js文件 <script src="h

  • 微信小程序访问node.js接口服务器搭建教程

    微信小程序访问node.js接口服务器搭建教程

    前言 最近在做微信的应用号小程序开发,小程序的后台数据接口需要https安全请求,所以需要我的nodejs服务器能够提供https的支持,现在就将整个https服务器的搭建过程说一下. 搭建教程如下: 首先,我试了一下以前的过期的证书,在开发者工具里模拟的时候可以正常访问接口,在手机里测试时候微信小程序的wx.request是会报SSL握手失败的错误(request error : request: fail ssl hand shake error),所以只能重新申请一个证书,这里推荐使用阿里

  • springMVC利用FastJson接口返回json数据相关配置详解

    一直使用的是FastJson,感觉还不错,很方便.看了一段别人的分析,觉得很有道理. 为什么要使用Fastjson,其实原因不需要太多,喜欢就行. 我之所以要替换掉Jackson最主要的原因是Jackson在处理对象之前的循环嵌套关系时不便. ps:什么是对象间的循环嵌套?比如A有一个List,B对象里又有一个A对象,当然返回A对象的Json字符串时,如果是 Jackson就会发生异常,因为Jackson天生不具备处理这种关系的能力,而Fastjson正好具备了这种能力(另,如果你用的是 Jac

  • java读取其他服务接口返回的json数据示例代码

    java读取其他服务接口返回的json数据示例代码

    前言 现在开发大部分都是服务化或者微服务,数据交换都是跨服务的,这里记录java调取其他接口的方法,下面话不多说了,来一起看看详细的介绍吧. java代码如下: /** * *<p>类描述:接口读取工具.</p> */ public class ReadUrlUtil { public static JSONObject readJsonFromUrl(String url) throws IOException, JSONException { InputStream is =

  • python 接口返回的json字符串实例

    如下所示: JSON 函数 使用 JSON 函数需要导入 json 库:import json. 函数 描述 json.dumps 将 Python 对象编码成 JSON 字符串 json.loads 将已编码的 JSON 字符串解码为 Python 对象 #!/usr/bin/env python # -*- coding: utf-8 -*- import urllib2 import urllib import cookielib import json def login(): data

  • 详解基于Node.js的微信JS-SDK后端接口实现代码

    详解基于Node.js的微信JS-SDK后端接口实现代码

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分享可以自定义内容,如下: 我承认,虽然这分享的标题和内容也并不正经,但这不妨碍我表达我们可以通过微信JSSDK定义分享内容,接下来我们将一步一步从零实现JSSDK从后端Node.js的接入. 成为测试公众号开发者 登录测试公众号后台 首先我们需要在微信公众平台申请测试接口,地址:https://mp

  • ajax请求后台接口数据与返回值处理js的实例讲解

    ajax的代码,用的是jquery的 ajax: $.ajax({ url: "/test.php",//后台提供的接口 type: "post", //请求方式是post data:{"type":"1", //这是你要传给后台的data值 "t":"c4552111" }, dataType: "json", //数据类型是json型 success: funct

  • JS实现百度搜索接口及链接功能实例代码

    本文通过代码给大家介绍js实现百度搜索接口及链接功能,具体代码如下所示: 在上篇文章给大家介绍了JS 实现百度搜索功能 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> *{ margin:0; padding:0; } #wei{ wid

  • 详解nodejs微信jssdk后端接口

    写过了两个微信的页面,遇到了挺多不会的问题,当时也是自己边查资料,边实践完成了简单的需求,刚好现在有空,把之前的东西整理一遍. 与普通的手机页面不同的是,微信页面提供给你了调用微信APP内置功能的接口,可以实现更复杂的功能. jssdk的前端使用 前端页面调用jssdk首先要通绑定"公众号设置"的"功能设置"里填写"JS接口安全域名" 然后在页面中引入http://res.wx.qq.com/open/js/... 调用 wx.config({.

  • ajax调用返回php接口返回json数据的方法(必看篇)

    php代码如下: <?php header('Content-Type: application/json'); header('Content-Type: text/html;charset=utf-8'); $email = $_GET['email']; $user = []; $conn = @mysql_connect("localhost","Test","123456") or die("Failed in conn

  • JavaScript通过filereader接口读取文件

    使用FileReader接口的readAsDataURL方法实现图片的预览. 源代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>通过filereader接口读取文件</title> <script type="text/javascript"

  • ionic3+Angular4实现接口请求及本地json文件读取示例

    ionic3+Angular4实现接口请求及本地json文件读取示例

    一 准备工作 首先,ionic3+Angular4的开发环境你得有,这里就不赘述.环境准备好,创建一个空白项目,模板自选. 二 实现过程 1 新建json文件和service service记得在app.module.ts中引用 json和service 2 json文件格式 格式类似这样,根据实际需求决定. [ { "id":"1", "name":"xiehan", "age":"24&quo

随机推荐