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发送给客户端.在与页面的后 ...
随机推荐
- Yaf + Smarty 整合笔记
Yaf真的是太简单了,简单到使用mvc的时候在view里面需要手写php脚本.因此考虑整合一下smarty模板引擎.随心所欲也正是yaf的魅力 Yaf 安装 这里简单说一下yaf的安装,已经是非常无脑 ...
- @Transactional之Spring事务深入理解
Spring支持两种事务方式: 编程式事务:使用的是TransactionTemplate(或者org.springframework.transaction.PlatformTransac ...
- kali源
apt源: #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib deb-src http://m ...
- What is Data Driven Testing? Learn to create Framework
What is Data Driven Testing? Data-driven is a test automation framework which stores test data in a ...
- JMeter - 如何测试REST API / 微服务
概述: 有许多方法和工具可用于测试REST API.当我需要测试REST API时,在查看了各种工具和选项之后,由于以下原因,我选择了JMeter. JMeter是免费和开源的. JMeter可以从C ...
- POJ1024 Tester Program
题目来源:http://poj.org/problem?id=1024 题目大意: 有一个迷宫,迷宫的起点在(0,0)处.给定一条路径,和该迷宫墙的设置,要求验证该路径是否为唯一的最短路径,该种墙的设 ...
- ACM-ICPC 2018 南京赛区网络预赛 J sum （找一个数拆成两个无平方因子的组合数）
题目大意:就是找一个数拆成两个无平方因子的组合数,然后求个前缀和 ; 分析:运用筛法的思想 , 因为有序对是由两个合法的数字组成的,所以只要保证第一个数合法,第二个数也合法就行,找出合法的第二个数 ...
- An internal error occurred during: "Add Deployment". Container with path org.eclipse.jdt.launching.
导入非本机项目出现这种错误,原因就是JDK版本不一致. 具体解决步骤如下: 右键项目名→Properties→JavaBuild Path→Libraries→选中JRE SystemLibrary[ ...
- Python 列表list 和 字符串str 互转
一.列表list转字符串str 命令(python2.x):''.join(list) 命令(python2.x):''.join(str(s) for s in list) 其中,引号中是字符之间的 ...
- Java多线程与并发——线程生命周期和线程池
线程生命周期: 线程池:是预先创建线程的一种技术.线程池在还没有任务到来之前,创建一定数量的线程,放入空闲队列中,然后对这些资源进行复用.减少频繁的创建和销毁对象. java里面线程池的顶级接口是E ...