博客
关于我
jquery 父页面,子页面之间页面元素的方法相互调用与元素访问
阅读量:294 次
发布时间:2019-03-03

本文共 1018 字,大约阅读时间需要 3 分钟。

父子页面间元素获取与方法调用技术总结

一、jQuery父子页面间元素获取与方法调用

在前后端分离的项目中,父子页面间的元素获取与方法调用是常见但富有挑战性的操作。以下将详细介绍几种常用方法。

1. 父页面获取子页面元素

通过jQuery可以方便地从父页面获取子页面的元素。主要方法包括:

$("#iframeID").contents().find("#子页面控件ID").click();

例如:$("#ifm").contents().find("#iBtnOk").click();

这里的ifm是子页面的iframe标签ID,iBtnOk是子页面中需要操作的按钮ID。

2. 父页面调用子页面方法

如果需要调用子页面的JavaScript方法,可以通过以下方式实现:

$("#iframeID")[0].contentWindow.iframe方法名称();

例如:$("#ifm")[0].contentWindow().iClick();

其中ifm是子页面的iframe标签ID,iClick是子页面定义的方法名。

3. 子页面获取父页面元素

在某些场景下,子页面也需要获取父页面的元素。可以通过以下方式实现:

$("#父页面元素ID", parent.document);

例如:$("#pBtnOk", parent.document).click();

这里的pBtnOk是父页面上的元素ID。

二、原生JavaScript父子页面间元素获取与方法调用

除了jQuery,还可以通过原生JavaScript实现父子页面间的元素获取与方法调用。以下是相关方法:

1. 子页面调用父页面方法

可以通过parent对象直接调用父页面的方法。例如:

parent.pClick();

其中pClick是父页面定义的方法名。

2. 子页面获取父页面元素

要获取父页面的元素,可以使用window.parent.document.getElementById("元素ID");。例如:

window.parent.document.getElementById("pBtnOk");

这里的pBtnOk是父页面上的元素ID。

转载地址:http://yayl.baihongyu.com/

你可能感兴趣的文章
NIFI大数据进阶_NIFI集群知识点_集群的断开_重连_退役_卸载_总结---大数据之Nifi工作笔记0018
查看>>
NIFI大数据进阶_内嵌ZK模式集群1_搭建过程说明---大数据之Nifi工作笔记0015
查看>>
NIFI大数据进阶_外部ZK模式集群1_实际操作搭建NIFI外部ZK模式集群---大数据之Nifi工作笔记0017
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_01_实际操作---大数据之Nifi工作笔记0029
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_02_实际操作_splitjson处理器_puthdfs处理器_querydatabasetable处理器---大数据之Nifi工作笔记0030
查看>>
NIFI大数据进阶_连接与关系_设置数据流负载均衡_设置背压_设置展现弯曲_介绍以及实际操作---大数据之Nifi工作笔记0027
查看>>
NIFI数据库同步_多表_特定表同时同步_实际操作_MySqlToMysql_可推广到其他数据库_Postgresql_Hbase_SqlServer等----大数据之Nifi工作笔记0053
查看>>
NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南001---大数据之Nifi工作笔记0068
查看>>
NIFI集群_内存溢出_CPU占用100%修复_GC overhead limit exceeded_NIFI: out of memory error ---大数据之Nifi工作笔记0017
查看>>
NIFI集群_队列Queue中数据无法清空_清除队列数据报错_无法删除queue_解决_集群中机器交替重启删除---大数据之Nifi工作笔记0061
查看>>
NIH发布包含10600张CT图像数据库 为AI算法测试铺路
查看>>
Nim教程【十二】
查看>>
Nim游戏
查看>>
NIO ByteBuffer实现原理
查看>>
Nio ByteBuffer组件读写指针切换原理与常用方法
查看>>
NIO Selector实现原理
查看>>
nio 中channel和buffer的基本使用
查看>>
NIO三大组件基础知识
查看>>
NIO与零拷贝和AIO
查看>>
NIO同步网络编程
查看>>