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发送给客户端.在与页面的后 ...
随机推荐
- 【转】C# 使用正则表达式去掉字符串中的数字，或者去掉字符串中的非数字
源地址:http://www.cnblogs.com/94cool/p/4332957.html
- 洛谷P4121 [WC2005]双面棋盘（线段树套并查集）
传送门 先膜一下大佬->这里 据说这题正解是LCT,然而感觉还是线段树套并查集的更容易理解 我们对于行与行之间用线段树维护,每一行内用并查集暴力枚举 每一行内用并查集暴力枚举连通块这个应该容易理 ...
- IOS swift实现密码的显示与隐藏切换
最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相 ...
- 浅析HTTP协议get请求与post请求
一.HTTP简介 1. HTTP协议:(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则(报文格式). 2.报文: ...
- Python Day23
Django之Model操作 一.字段 字段列表 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - ...
- Java通过IO流输入输出 向文件中存入大量三个属性的值，并通过验证前两个属性输出第三个属性
package ABC1; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import ...
- jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换
首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- spring mvc做上传图片，文件小于10k就不生成临时文件了
这是spring-mvc.xml中的 <bean id="multipartResolver" class="org.springframework.web.mul ...
- KMP 串的模式匹配 （25 分）
给定两个由英文字母组成的字符串 String 和 Pattern,要求找到 Pattern 在 String 中第一次出现的位置,并将此位置后的 String 的子串输出.如果找不到,则输出“Not ...
- mysql 帮助手册 以及 warning: World-writable config file 以及 ERROR 1840 (HY000) at line 24:
1. mysql --help 2.报错 报错Warning: World-writable config file http://www.jb51.net/article/99027.htm 最近在 ...