JQuery javascript实现父子页面相互调用
javascript实现父子页面相互调用
By:授客 QQ:1033553122
场景1 父页面调用子页面
如上图,在iframe子页面的<script>元素中,定义了taskStatus全局变量,如果希望在其父页面中获取该全局变量的值,则可在父页面的<script>元素中新增js脚本如下:
var taskStatus = document.getElementById('iframe-1-11').contentWindow.taskStatus;
注:这里iframe-1-11为子页面iframe id属性值
注:也可以通过上述方式去调用子页面定义的全局函数
场景2 子页面调用父页面
如上图,如果希望在iframe子页面<script>中获取父页面当前tab页面,以获取tab标签页其它信息,可在父页面的<script>元素中新增js脚本如下:
- var currentTab = window.parent.$('#tabs').tabs('getSelected');
- # 后续操作
- var tabID = currentTab.panel('options').id;
- ……
- 说明:此处的#tabs 为easyui tab div容器的id
上述带背景色部分的js内容为关键语法
JQuery javascript实现父子页面相互调用的更多相关文章
- JavaScript 父子页面相互调用总结
父子页面相互调用是一个在开发中经常遇到的问题,但是没有找到过比较全面的文章介绍.在此总结下来,供大家参考. 四种方式 一般情况下,我们可以使用iframe.window的open.showModalD ...
- iframe父子页面相互调用方法,相互获取元素
父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...
- Javascript和BHO的相互调用简介
v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...
- Flex父子窗口相互调用
Flex父子窗口相互调用 1.设计思路 (1)子窗口调用父窗口的方法 (2)子窗口做了修改后,返回父窗口,父窗口调用子窗口函数 2.设计源码 (1)父窗口 ParentWindow.mxml: < ...
- Flex父子窗体相互调用
Flex父子窗体相互调用 1.设计思路 (1)子窗体调用父窗体的方法 (2)子窗体做了改动后,返回父窗体,父窗体调用子窗体函数 2.设计源代码 (1)父窗体 ParentWindow.mxml: &l ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- 【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- iframe 父子页面方法调用
在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.framebo ...
- javascript与java的相互调用,纯java的javascript引擎rhino(转载)
1.下载Rhino安装包,下载地址:官网http://www.mozilla.org/rhino. 2.rhino环境配置,把解压出来的js.jar文件加入到系统的环境变量classpath 3.在命 ...
随机推荐
- Power BI 的数据源及数据刷新
Power BI 目前可以连接超过100种数据源,包含常见的各种数据库,文件,数据仓库,云等等. 不同的数据源支持不同的连接方式,通常来讲,Power BI 支持两种数据连接方式: 导入(import ...
- SpringBoot内容聚合
分类整理一些内容,方便需要时回过头来看,整理不易,如有疏漏,请多担待!之后要查看这篇文章,公众号后台回复 “Springboot聚合” SpringBoot+Mybatis多模块(module)项目搭 ...
- Linux服务器部署.Net Core笔记:五、安装Nginx
我们搜索一下yum库关于nginx的rpm包:yum list | grep nginx 找到rpm安装包,我们就可以使用yum直接安装了:yum install nginx 修改nginx配置文件: ...
- SAP MM ME57界面看到的供应源跟Source List主数据不一致?
SAP MM ME57界面看到的供应源跟Source List主数据不一致? ME57,为如下的PR单据分配供应源, 发现找不到想要分配的供应源. ME03 去看Source List主数据, 黄色标 ...
- 65-如何部署 Calico 网络?
Calico 是一个纯三层的虚拟网络方案,Calico 为每个容器分配一个 IP,每个 host 都是 router,把不同 host 的容器连接起来.与 VxLAN 不同的是,Calico 不对数据 ...
- NPM 问题汇总
1. Error: setuid user id does not exist Error: setuid user id does not exist at /usr/local/lib/node_ ...
- asp.net core使用serilog将日志推送到腾讯云日志服务
为什么是serilog? Serilog是 .NET 中最著名的结构化日志类库. 基于日志事件log events,而不是日志消息log message. 你可以将日志事件格式化为控制台的可读文本或者 ...
- 耐人寻味的CSS属性font-family
font-family是一个网站用户体验的第一入口,非常有必要花功夫来研究一下.我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性. 衬线字体 衬线(serif)的笔画有粗有细的 ...
- Java生鲜电商平台-生鲜系统中微服务架构设计与分析实战
Java生鲜电商平台-生鲜系统中微服务架构设计与分析实战 说明: Java生鲜系统中微服务的拆分应该如何架构设计与分析呢?以下是我的实战中的设计与经验分析. 目录 1. 微服务简介2. 当前现状3. ...
- Laravel Validator
Controller use Validator; public function Validators(){ $rules = [ 'title' => 'required|max:255', ...