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.在命 ...
随机推荐
- Docker图形化工具Portainer详解
一.介绍 说明: Portainer是易于使用的软件,可为软件开发人员和IT操作人员提供直观的界面. Portainer为你提供Docker环境的详细概述,并允许你管理容器,镜像,网络和数据卷 ...
- php使用微信登录
1.第一步 $hosturl = urlencode('');//异步回调地址 $wechatInfo = WechatInfo::get_wechat(); //查询appid $url = &qu ...
- Android: Unable to resolve dependency for ':app@debugUnitTest/compileClasspath':
我按照ExoPlayer的github指引添加 implementation 'com.google.android.exoplayer:exoplayer:2.X.X' 发现根本run不起来,并报错 ...
- OpenLDAP的docker版安装
分为服务器和client的web版. ldap.sh #!/bin/bash -e docker run --name ldap-service -- docker run --name phplda ...
- 使用 ASP.NET Core MVC 创建 Web API(六)
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...
- Java 读取excel表格文件
注意,本文使用的Jar包为jxl.jar,只能处理97-03版本xls格式的Excel jar包 maven依赖: <dependency> <groupId>net.sour ...
- js 淡入淡出的tab选项卡
代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- bootstrap-table 常用总结-树形结构(展开和折叠)
今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构.关于树形结构的不是很熟悉,然后去百度,结果也不是很准确.最后经过Google才找到.下面分享给大家 直接看代码: var flag ...
- table表格中的 colspan rowspan cellpadding cellspacing
横跨两列的单元格: colspan 属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...
- RunLoop 和 autoreleasepool
RunLoop 和 autoreleasepool RunLoop和线程的一一对应的,对应的方式是以key-value的方式保存在一个全局字典中 主线程的RunLoop会在初始化全局字典时创建 子线程 ...