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实现父子页面相互调用的更多相关文章

  1. JavaScript 父子页面相互调用总结

    父子页面相互调用是一个在开发中经常遇到的问题,但是没有找到过比较全面的文章介绍.在此总结下来,供大家参考. 四种方式 一般情况下,我们可以使用iframe.window的open.showModalD ...

  2. iframe父子页面相互调用方法,相互获取元素

    父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...

  3. Javascript和BHO的相互调用简介

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  4. Flex父子窗口相互调用

    Flex父子窗口相互调用 1.设计思路 (1)子窗口调用父窗口的方法 (2)子窗口做了修改后,返回父窗口,父窗口调用子窗口函数 2.设计源码 (1)父窗口 ParentWindow.mxml: < ...

  5. Flex父子窗体相互调用

    Flex父子窗体相互调用 1.设计思路 (1)子窗体调用父窗体的方法 (2)子窗体做了改动后,返回父窗体,父窗体调用子窗体函数 2.设计源代码 (1)父窗体 ParentWindow.mxml: &l ...

  6. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  7. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  8. iframe 父子页面方法调用

    在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.framebo ...

  9. javascript与java的相互调用,纯java的javascript引擎rhino(转载)

    1.下载Rhino安装包,下载地址:官网http://www.mozilla.org/rhino. 2.rhino环境配置,把解压出来的js.jar文件加入到系统的环境变量classpath 3.在命 ...

随机推荐

  1. PDF提取表格的网页工具——Excalibur

      在之前的文章另类爬虫:从PDF文件中爬取表格数据中,我们知道如何利用Python的camelot模块,通过写Python程序来提取PDF中的表格数据.本文我们将学习如何用更便捷的工具从PDF中提取 ...

  2. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  3. CURL命令学习二

    -a, --append 用于上传文件时,如果服务器上该文件不存在则创建,如果存在则追加到源文件. -K, --config <file> 指定从某个文件读取curl参数.如果指定-为文件 ...

  4. Linux Pptpd

    准备环境 1 主机ip:192.168.0.107 2 VPN服务器: ens32:192.168.0.102 ens33:127.16.1.10 软件安装 [root@localhost ~]# y ...

  5. (办公)记事本_Linux常用的文件操作命令

    参考尚硅谷的谷粒学院的linux教程:http://www.gulixueyuan.com/course/300/task/7080/show 好吧,其实一个命令他要是讲超过20分钟,我就去看菜鸟教程 ...

  6. 【SVN搭建】搭建SVN服务

    1.安装 # yum -y install subversion 2.配置 创建仓库 我们这里在/opt下建立一个名为svn的仓库(repository),所有代码都可以放在这个下面,创建成功后在sv ...

  7. less 学习笔记

    一.介绍 Less (Leaner Style Sheets 简洁的样式表) 是一门向后兼容的 CSS 预处理语言,它扩展了CSS 语言. less is more. 好处: 1.具有部分编程语言的功 ...

  8. 使用EasyPOI导入导出图片出现数组越界异常

    在我使用easypoi做导出功能的时候,突然抛了一个数组越界异常,找了很久也没找到,最后猜想有可能是路径出了问题,然后打印了一下图片存放的路径,结果发现在其保存路径上存在“.”,也就是easypoi底 ...

  9. JavaWeb入门——在Linux环境下安装Tomcat服务器

    JavaWeb入门——在Linux环境下安装Tomcat服务器 摘要:本文主要学习了如何在Linux环境下安装Tomcat服务器. 准备工作 检查Java环境变量 检查系统是否配置了Java的环境变量 ...

  10. iOS----------componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

    将string字符串转换为array数组 NSArray  *array = [Str componentsSeparatedByString:@","]; ==反向方法 将arr ...