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

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

javascript实现父子页面相互调用


 

 

 

场景1 父页面调用子页面

如上图,在iframe子页面的元素中,定义了taskStatus全局变量,如果希望在其父页面中获取该全局变量的值,则可在父页面的<script>元素中新增js脚本如下:</span></div><div><span class="lake-fontsize-1515"><strong>var </strong>taskStatus = <strong>document</strong>.getElementById(<strong>'iframe-1-11'</strong>).<strong>contentWindow</strong>.taskStatus;</span></div><div><span class="lake-fontsize-1515"> </span></div><div><span class="lake-fontsize-1515">注:这里<strong>iframe-1-11</strong>为子页面iframe id属性值</span></div><div><span class="lake-fontsize-1515"> </span></div><div><span class="lake-fontsize-1515">注:也可以通过上述方式去调用子页面定义的全局函数</span></div><h1 id="pw9yq"><span class="lake-fontsize-1515">场景2 子页面调用父页面</span></h1><div><span class="lake-fontsize-1515">如上图,如果希望在iframe子页面<script>中获取父页面当前tab页面,以获取tab标签页其它信息,可在父页面的<script>元素中新增js脚本如下:</span></div><div><span class="lake-fontsize-1515"><strong>var </strong>currentTab = <strong>window</strong>.<strong>parent</strong>.<strong>$</strong>(<strong>'#tabs'</strong>).tabs(<strong>'getSelected'</strong>);</span></div><div><span class="lake-fontsize-1515"> </span></div><div><span class="lake-fontsize-1515"><strong># </strong><strong>后续操作</strong></span></div><div><span class="lake-fontsize-1515"><strong>var </strong>tabID = currentTab.panel(<strong>'options'</strong>).id;</span></div><div><span class="lake-fontsize-1515">……</span></div><div><span class="lake-fontsize-1515">说明:此处的<strong>#tabs </strong>为easyui tab div容器的id</span></div><div><span class="lake-fontsize-1515"> </span></div><div><span class="lake-fontsize-1515"> </span></div><div><span class="lake-fontsize-1515">上述带背景色部分的js内容为关键语法</span></div><div><span class="lake-fontsize-1515"> </span></div>

目录
相关文章
|
17天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`&lt;li v-for=&quot;activity in activities&quot;&gt;`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
81 5
|
3天前
|
Web App开发 移动开发 前端开发
技术经验分享:canvas+howler.js解决同页面视频、音频同时播放问题
技术经验分享:canvas+howler.js解决同页面视频、音频同时播放问题
|
24天前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
22 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
6天前
|
缓存 JavaScript 前端开发
js刷新当前页面
js刷新当前页面
|
11天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
13天前
|
JavaScript 前端开发
页面加载时执行特定的 JavaScript 代码
页面加载时执行特定的 JavaScript 代码
|
24天前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
19 1
|
3天前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
3天前
|
缓存 JavaScript 前端开发
老程序员分享:js刷新页面得重新加载和页面的刷新
老程序员分享:js刷新页面得重新加载和页面的刷新
|
3天前
|
缓存 JavaScript 前端开发
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段