本文介绍如何在JavaScript中封装父页面与子页面的标准交互接口。通过定义统一的Interface对象，分别注册ParentWin和ChildWin的回调函数，实现子页面向父页面获取数据、提交数据以及关闭窗口的功能，确保跨域或同域下的页面通信安全与规范。
定义标准接口对象
首先，需要定义一个标准的接口对象，用于规范父页面与子页面之间的通信规则。在代码中，创建一个名为Interface的全局对象，并初始化其两个子属性：ParentWin和ChildWin，分别用于存放父页面和子页面提供的接口函数。父页面通过Interface.ParentWin.funName对象定义具体的功能名称，包括getDataFun（供子页面调用以获取数据）、updateDataFun（供子页面调用以向父页面提交数据）以及closeFun（供子页面调用以触发父页面关闭窗口的逻辑）。这种结构化的定义方式有助于后续接口的注册与管理。
注册父页面回调函数
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>接口调用与数据交互
接下来，父页面需要注册具体的回调函数。通过调用注册方法，传入子页面的ID（需与子页面中定义的ID一致）以及具体的功能名称和回调函数。例如，在示例代码中，父页面注册了名为'test'的子页面ID，并关联了updateDataFun功能。当子页面调用该接口时，父页面执行的回调函数会接收子页面传递的数据，进行相应处理（如弹出提示），并返回处理后的结果字符串。这一过程实现了子页面到父页面的数据交互与反馈机制。
总结与应用建议
上述内容展示了JS封装父页面与子页面交互接口的核心实现逻辑。通过标准化的接口定义与回调注册，可以有效管理跨页面通信，提升代码的可维护性与扩展性。希望本文提供的实例代码能帮助开发者解决相关交互问题。如有任何疑问或建议，欢迎留言讨论，小编将及时回复。