javascript实现父子页面相互调用

By:授客 QQ1033553122

场景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. MongoDB(六):选择字段、限制记录数、排序记录

    1. 选择字段 在MongoDB中,选择字段又叫投影,表示仅选择所需要字段的数据,而不是选择整个文档字段的数据.如果某个文档有5个字段,但只要显示3个字段,那么就只选择3个字段吧,这样做是非常有好处的 ...

  2. HTML连载57-相对定位和绝对定位

    一.定位流 1.分类 (1)相对定位: (2)绝对定位 (3)固定定位 (4)静态定位 2.什么相对定位 相对定位就是相对于自己以前在标准流中的位置来移动. 例子: <style> div ...

  3. 软件开发工具(第13章: Eclipse插件的使用与开发)

    一.插件简介 插件的定义(了解) 插件是一种遵循其所依附的软件的接口规范所编写出来的程序. 插件实际上是对原有软件的扩展,替应用程序增加一些所需要的特定 功能. 插件的构成(重点.记忆) 每个插件都由 ...

  4. centos7下MySQL5.7修改默存储路径

    安装MySQL中YUM默认安装路径是/var/lib/mysql下,有时候该目录分配的磁盘空间并不大,需要迁移到新的磁盘目录 df  -h 查看磁盘空间大小 本次迁移到 /home目录下 1.在hom ...

  5. deepin镜像 mxlinux镜像 ubuntu镜像桌面版

    百度网盘https://pan.baidu.com/s/18HX4XgXRMXFho036tuP-Hw

  6. How to: Initialize Business Objects with Default Property Values in XPO 如何:在 XPO 中用默认属性值初始化业务对象

    When designing business classes, a common task is to ensure that a newly created business object is ...

  7. Change Style of Navigation Items 更改导航项的样式

    In this lesson, you will learn how to change the style of navigation items in a WinForms XAF applica ...

  8. MySQL索引查询原理

    什么是索引? “索引”是为了能够更快地查询数据.比如一本书的目录,就是这本书的内容的索引,读者可以通过在目录中快速查找自己想要的内容,然后根据页码去找到具体的章节. 数据库也是一样,如果查询语句使用到 ...

  9. C#本地文件下载以及FTP文件服务下载(以Pdf文件为例)

    一.C#实现本地文件下载 1.文件下载的路径  文件名称 以及文件下载之后要放的位置  这三个变量是必须要的 2.定义以下四个对象: FileWebRequest ftpWebRequest = nu ...

  10. The Library:2 Vulnhub Walkthrough

    主机层面扫描探测: ╰─ nmap -p1-65535 -sV -A 10.10.202.132 Starting Nmap 7.70 ( https://nmap.org ) at 2019-08- ...