这篇文章主要介绍了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如何封装父页面子页面交互接口”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
