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

来源：懂视网责编：小采时间：2020-11-27 21:54:29

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

JS 封装父页面子页面交互接口的实例代码:定义标准接口 Interface= {}; Interface.ParentWin = {}; Interface.ChildWin = {}; /** * 父页面提供的标准接口函数名称 */ Interface.ParentWin.funName = { getDataFun: getDataFun, //子页面调用，提供给子

推荐度：

点击下载本文 文档为doc格式

导读JS 封装父页面子页面交互接口的实例代码:定义标准接口 Interface= {}; Interface.ParentWin = {}; Interface.ChildWin = {}; /** * 父页面提供的标准接口函数名称 */ Interface.ParentWin.funName = { getDataFun: getDataFun, //子页面调用，提供给子

定义标准接口

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

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

推荐度：

点击下载本文 文档为doc格式

标签： js 接口例子

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐