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. 小白的springboot之路(十三)、过滤器、监听器、拦截器

    0.前言 过滤器.监听器.拦截器在实际开发中经常需要用到,下面我们来介绍一下spring boot中如何使用: 一.------ 过滤器 ----- 1.作用: 过滤器是客户端与服务器资源文件之间的一 ...

  2. 在CentOS 7 上使用Docker 运行.NetCore项目

    安装Docker CentOS 7 安装 Docker 编写Dockerfile 右键项目->添加->Docker 支持 选择Linux 修改为如下: FROM mcr.microsoft ...

  3. CDN原理加速解析

    CDN概念 CDN全称叫做“Content Delivery Network”,中文叫内容分发网络.   原理分析 我们知道,当我们使用域名访问某一个网站时,实际上就是将请求包(以Http请求为例)通 ...

  4. 通过ADB获取Android手机信息

    原文:https://blog.csdn.net/fasfaf454/article/details/51438743 1.获取手机系统信息( CPU,厂商名称等)adb shell "ca ...

  5. 65-如何部署 Calico 网络?

    Calico 是一个纯三层的虚拟网络方案,Calico 为每个容器分配一个 IP,每个 host 都是 router,把不同 host 的容器连接起来.与 VxLAN 不同的是,Calico 不对数据 ...

  6. Http中URI协议 和URL协议的区别和联系

    虽然说URL和URI是整个网络协议栈很常用的东西.可是,假如你去面试求职者其中的差别,估计十个人有八个人答复不上来. 想要熟悉基础知识的朋友最好还是看一下我这个文章. “A Uniform Resou ...

  7. P1983 车站分级 思维+拓扑排序

    很久以前的一道暑假集训的题,忘了补. 感觉就是思维建图,加拓扑排序. 未停靠的火车站,必然比停靠的火车站等级低,就可以以此来建边,此处注意用vis来维护一下,一个起点和终点只建立一条边,因为不这样的话 ...

  8. mitmproxy 使用笔记

    零.背景 我之前写过关于 charles 的使用笔记,为什么现在又要来写同类型的 mitmproxy 工具呢?下面我会娓娓道来他比 charles 多出的强大功能. 一.介绍 mitmproxy 是一 ...

  9. Flask request和response

        Response # -*- coding: utf-8 -*-   from flask import Flask, redirect, render_template, jsonify,  ...

  10. How to: Recompile the Business Class Library 如何:重新编译业务类库

    The eXpressApp Framework supplies the Business Class Library that consists of three assemblies. eXpr ...