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.在命 ...
随机推荐
- Logstash组件详解(input、codec、filter、output)
logstash组件详解 logstash的概念及特点. 概念:logstash是一个数据采集.加工处理以及传输(输出)的工具. 特点: - 所有类型的数据集中处理 - 不同模式和格式数据的正常化 - ...
- 松软科技课堂:JS HTML DOM
通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素. HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Objec ...
- Cobbler 2.x安装与配置
软件环境 Centos7.3 Cobbler 2.8.1 1.下载.编译和安装 创建自动安装脚本cobbler-install.sh #!/bin/bash # File Name: /data/sr ...
- JQuery 表单textarea控制字数
/** *textarea 字数限制 *obj textarea * maxlength 限制的最大字数 */ function textarealength(obj,maxlength){ var ...
- linux 定时备份数据库
说明 检查Crontab是否安装 若没有 需要先安装Crontab定时工具 安装定时工具参考(https://www.cnblogs.com/shaohuixia/p/5577738.html) 需要 ...
- 搭建私人的云笔记_使用webdav服务
搭建私人的云笔记_使用webdav服务 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-10-10. 手机上有很多云笔记app,大多支持云存储.可是把笔记放在别人的服务器上,总觉得不 ...
- redis系列之------链表
前言 链表提供了高效的节点重排能力, 以及顺序性的节点访问方式, 并且可以通过增删节点来灵活地调整链表的长度. 作为一种常用数据结构, 链表内置在很多高级的编程语言里面, 因为 Redis 使用的 C ...
- 4. java基础之修饰符
其他修饰符 public 可以修饰属性.方法.构造方法.类 protected 可以修饰属性.方法.构造方法 default 可以修饰属性.方法.构造方法.类 private 可以修饰属性.方法.构造 ...
- .netcore2.1 ef 使用外键关联查询
//实体类 [Table("invoiceinfo", Schema = "obs")] public class invoice { [Key] public ...
- android studio 3.4配置Android -jni 开发基础
首先下载配置android studio ndk 1.打开sdkManager下载CMake和LLDB 2.配置ndk 项目新建 项目建立完毕后,工程目录如下,cpp文件夹是系统自动生成的 3.自定义 ...