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

时间：2021-05-26

定义标准接口

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章