前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JQuery javascript实现父子页面相互调用

JQuery javascript实现父子页面相互调用

作者头像
授客
发布2019-08-21 14:57:45
2K0
发布2019-08-21 14:57:45
举报
文章被收录于专栏:授客的专栏授客的专栏

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脚本如下:

代码语言:javascript
复制
var currentTab = window.parent.$('#tabs').tabs('getSelected');
代码语言:javascript
复制
代码语言:javascript
复制
# 后续操作
代码语言:javascript
复制
var tabID = currentTab.panel('options').id;
代码语言:javascript
复制
……
代码语言:javascript
复制
说明:此处的#tabs 为easyui tab div容器的id
代码语言:javascript
复制

上述带背景色部分的js内容为关键语法

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-07-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 场景1 父页面调用子页面
  • 场景2 子页面调用父页面
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档