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 封装父页面子页面交互接口的更多相关文章
- javascript父、子页面交互小结
帧用来存放子页面,既可以是iframe,又可以是frameset.window对象是全局对象,页面上的一切函数和对象都在它的作用域里. 1.parent代表父窗口.如果父窗口又存在若干层嵌套, ...
- 【转】iframe和父页，window.open打开页面之间的引用
[转]iframe和父页,window.open打开页面之间的引用 iframe和父页,window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到 1)通过iframe加载的,在if ...
- js里父页面与子页面的相互调用
一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...
- javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互
1.运算符 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- Beaglebone Black– 智能家居控制系统 LAS - 网页服务器 Node.js 、Web Service、页面 和 TCP 请求转 UDP 发送
上一篇,纯粹玩 ESP8266,写入了 init.lua 能收发 UDP.这次拿 BBB 开刀,用 BBB host 一个 web server ,用于与用户交互,数据来自 ESP8266 的 UDP ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- 我的第一个python web开发框架（18）——前台页面与接口整合
由于我们前后台系统没有分开,所以前台页面调用接口时,可以直接使用后台管理系统已经完成的接口,不过后台管理系统接口的访问加上了登录验证,所以需要将前台要用到的接口进行处理,让它们设置到白名单当中 我们打 ...
- js动态获取浏览器或页面等容器的宽高
首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
随机推荐
- hdu 2147 kiki's game（巴什博弈）
kiki's game HDU - 2147 题意:一个n*m的表格,起始位置为右上角,目标位置为左下角,甲先开始走,走的规则是可以向左,向下或者向左下(对顶的)走一格.谁先走到目标位置谁就胜利.在甲 ...
- HDU1729 Stone Game
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1729 思路:理解错题目了,以为SG模板直接套就行了.后来队友说了那个ci是不断变化的.那么每次可以放的石头 ...
- AT2382 A or...or B Problem
传送门 还是看题解的啦 先考虑一个显而易见的结论:A和B二进制下最高的几位相同是没用的(设去掉的那些位之和为sum) 然后我们设\(d\)为二进制下从高位到低位第一位不相同的,\(k\)为B从高位到低 ...
- Linux下iptables总结
linux下防火墙iptables 工作于网络或主机边缘,对进出本网络或本主机的网络报文安装事先设定好的匹配规则进行检查,对能够被规则所匹配的报文按照规则定义的处理机制进行处理的组件 通常情况下ipt ...
- Luogu P4478 [BJWC2018]上学路线 卢卡斯+组合+CRT
首先,从$(0,0)$走到$(n,m)$的方案数是$ C_{n+m}^n$,可以把走的方向看作一种序列,这个序列长$ n+m$ ,你需要从中任取$n$个位置,让他向右走: 然后就是如何处理不能走的点: ...
- Anniversary party （树形DP）
There is going to be a party to celebrate the 80-th Anniversary of the Ural State University. The Un ...
- Sandcastle Help File Builder 生成NET帮助文档
Sandcastle是微软提供的一个根据XML注释和DLL文件生成帮助文件的工具,目前是在CodePlex上的一个开源项目,可以去这里下载:Sandcastle Sandcastle生成的输出结果具有 ...
- 【Java】国内maven私服
<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...
- Ceres Solver: 高效的非线性优化库（二）实战篇
Ceres Solver: 高效的非线性优化库(二)实战篇 接上篇: Ceres Solver: 高效的非线性优化库(一) 如何求导 Ceres Solver提供了一种自动求导的方案,上一篇我们已经看 ...
- Python list, dict, set, tuple
list方法 append: 添加一个新的元素到末尾 extend: 扩展元素 insert: 在任何位置插入元素 pop: 弹出末尾的元素 remove: remove first occurren ...