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.在命 ...
随机推荐
- python操作文件和目录查看、创建、删除、复制
python内置了os模块可以直接调用操作系统提供的接口函数,os.name查询的是操作系统,‘nt’表示windows系统 >>> import os >>> o ...
- VUE项目Eslint报错
前言:eslint很恶心的一个地方:你是否被各种语法报错一个标点符号,一个空格,一个回车......各种报错折磨着你! 加上编辑器 VS Code 的自动格式化稳稳的和Eslint冲突报错. 对此,我 ...
- 浅谈c#和lua的gc
前提: 本文参考和借鉴相关博客,相关版权归其所有,我只是做一个归纳整理,所以本文没有任何版权 参考文献和书籍: CLR和.Net对象生存周期: https://www.cnblogs.com/Wd ...
- ZKWeb网页框架3.0正式发布
3.0 更新的内容有 更新 .NET 框架 替换项目模版的 netcoreapp2.2 到 netcoreapp3.0 目前支持的 .NET 框架有: net461, netcoreapp2.0, n ...
- Yii2中indexBy()的使用
在项目开发中经常会使用到一些特殊的值作为数组的索引,一般可以先查询出数据后数组循环拼接成所需的格式.不过YII2框架提供了一种更简单的方法indexBy(). 参考Yii文档:https://www. ...
- Leetcode题解 - 链表简单部分题目代码+思路(21、83、203、206、24、19、876)
- C# Parallel 多线程并发
Parallel并发执行多个任务 多线程的,主线程会参与计算---阻塞界面等于TaskWaitAll+主线程计算 常用方法 1.Invoke 尽可能并行执行提供的每个操作 Console.Write ...
- PHP+jQuery中国地图热点数据统计展示实例
一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...
- JavaWeb学习——Servlet相关的接口和类
JavaWeb学习——Servlet相关的接口和类 摘要:本文主要学习了Servlet相关的接口和类. Servlet的接口和类 三种方式 实现Servlet有三种方式: 实现javax.servle ...
- Flask 教程 第十一章:美化
本文翻译自The Flask Mega-Tutorial Part XI: Facelift 这是Flask Mega-Tutorial系列的第十一部分,我将告诉你如何用基于Bootstrap用户界面 ...