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发送给客户端.在与页面的后 ...
随机推荐
- uva 1153 顾客是上帝（贪心）
uva 1153 顾客是上帝(贪心) 有n个工作,已知每个工作需要的时间q[i]和截止时间d[i](必须在此前完成),最多能完成多少个工作?工作只能串行完成,第一项任务开始的时间不早于时刻0. 这道题 ...
- 2017-9-26 NOIP模拟赛
NOIP 2017 全真模拟冲刺 ---LRH&&XXY 题目名称 那些年 铁路计划 毁灭 题目类型 传统 传统 传统 可执行文件名 years trainfare destroy 输 ...
- InfoQ —— 腾讯游戏大数据服务场景与应用
简介 周东祥,本人从2010年毕业进入腾讯互动娱乐部门工作,一直致力在腾讯游戏运营开发工作.先后负责SAP业务受理系统,盗号自助系统,元数据系统以及近2年在腾讯游戏大数据运营开发中积累大量的大数据开发 ...
- Repeater+AspNetPager+Ajax留言板
最近想要巩固下基础知识,于是写了一个比较简单易懂实用的留言板. 部分样式参考了CSDN(貌似最近一直很火),部分源码参照了Alexis. 主要结构: 1.前期准备 2.Repeater+AspNetP ...
- [Xcode 实际操作]五、使用表格-(5)设置UITableView的单元格背景颜色
目录:[Swift]Xcode实际操作 本文将演示单元格背景颜色的设置 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协 ...
- JavaScript 性能优化
加载和执行 1. </body>闭合标签之前,将所有的<script> 标签放在页面底部,确保在脚步执行之前页面已经完成渲染. 2. 合并脚本.下载单个 100KB 的文件将比 ...
- JAVA之反射(一)
反射(一) ** 注:博主的这篇文章是在学习反射的时间写的如有问题请及时联系博主进行修改 ** 何为反射 这里也不说一些很官方的语言了,官方的说明看着头痛,总之一句话,就是在JAVA的运行状态的时候 ...
- html标签的补充—— b,strong标签
b,strong标签 表意: 强调文本中的比较重要的词语 b标签,仅仅只是规定文本加粗 strong标签,不仅规定文本加粗,而且还能够表示强调 如果仅仅是为了视觉效果,使用样式(CSS)调整Web提倡 ...
- Microsoft JDBC Driver 使用 getParameterMetaData 会报错？
不知道为何使用 Microsoft JDBC Driver for SQL Server 驱动时,sql语句不带参数没有问题,但是如果带参数且使用 getParameterMetaData 就会提示某 ...
- eclipse导入maven项目有时出现web.xml is missing的问题
今天导入一个从Git上pull下来的项目导入eclipse时,报错web.xml is missing,但是我检查了webapp下面的WEB-INF目录下是有web.xml的,然后就纠结了.纠结了半天 ...