Js/Jquery获取iframe中的元素

于 2021-06-22 13:50:04 发布
阅读量476 收藏
点赞数
分类专栏： 前端开发
原文链接：https://www.cnblogs.com/byayn/p/10697525.html
版权

在父窗口中获取iframe中的元素

1

2

3

4

5

6

7

8

9

10

11

格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 

实例：window.frames["ifm"].document.getElementById("btnOk").click(); 

 

格式： 

var obj=document.getElementById("iframe的name").contentWindow; 

var ifmObj=obj.document.getElementById("iframe中控件的ID"); 

ifmObj.click(); 

实例： 

var obj=document.getElementById("ifm").contentWindow; 

var ifmObj=obj.document.getElementById("btnOk"); 

ifmObj.click(); 

 在iframe中获取父窗口的元素

1

2

格式：window.parent.document.getElementById("父窗口的元素ID").click(); 

实例：window.parent.document.getElementById("btnOk").click(); 

Jquery

在父窗口中获取iframe中的元素

1

2

3

4

5

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 

实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1 

 

格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2 

实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2 

在iframe中获取父窗口的元素

1

2

格式：$('#父窗口中的元素ID', parent.document).click(); 

实例：$('#btnOk', parent.document).click();

碎火流荧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS/jquery获取iframe内部元素和ifame中获取外部元素精华
乔的博客
02-26 354
【代码】JS/jquery获取iframe内部元素和ifame中获取外部元素精华。
JS/jquery获取iframe内部元素和ifame中获取外部元素
qq_43588993的博客
02-20 511
使用js/jquery在ifame中获取外部元素 js ：window.parent.document.getElementById("headLogo"); 　jq : $('#headLogo',parent.document) 补充： jquery中，$()有两个参数，第一个是选择器，第二个是作用域。例如： $('span').css('background-color','red');//所有的span都会变红 $('span','.wrap').css('backgro
Js/Jquery获取iframe中的元素（window、document）
menghuanzhiming的博客
12-09 3397
参考地址： Window frames 属性：https://www.runoob.com/jsref/prop-win-frames.html jQuery 遍历 - contents() 方法：https://www.w3school.com.cn/jquery/traversing_contents.asp 获取iframe中的window对象： //js document.getEle...
使用 js / jQuery获取iframe中的元素
css_666的博客
02-08 1474
1.在父页面中获取子iframe中的元素： js: window.frames["iframe的name值"].document.getElementById("iframe中控件的ID"); jQuery: $("#iframe的ID").contents().find("#目标元素的ID") 注意：在获取子页面的时候，如果子页面尚未加载完毕，上述方法会获取不到。尽量不要在...
Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
涂作权的博客
11-04 1535
在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素js在父窗口中获取iframe中的元素 1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();实例：window.frames["ifm"].doc
Js/Jquery 获取iframe中的元素
热门推荐
shadow_zed的博客
08-25 2万+
由于公司项目开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素。 js 在父窗口中获取iframe中的元素 Js代码  // 格式： window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();   // 实例 window....
iframe的操作-Js/Jquery获取iframe中的元素
渴望飞的鱼的博客
04-03 1077
Js/Jquery获取iframe中的元素 在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素。js在父窗口中获取iframe中的元素1.Js代码  格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();  实例...
人工蜂群算法ABC-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6743期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
【独家首发】龙格库塔算法RUN优化Transformer-BiLSTM负荷数据回归预测【含Matlab源码 6563期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Transformer-Bilstm预测 4.4.6 其他优化算法优化Transformer-Bilstm预测
【中科院1区】Matlab实现海鸥优化算法SOA-RF锂电池健康状态估计算法研究.rar
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
数据链通信行业简报.pdf
08-02
数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行业简报.pdf数据链通信行
黑猩猩算法Chimp-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6724期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
鸡群优化算法和鸟群算法
最新发布
08-02
优化算法之一，通过群优化算法，优化计算过程 (One of the optimization algorithms, through the group optimization algorithm, the optimization of the calculation process)
content_1722595758595.apk
08-02
content_1722595758595.apk
金豺算法GJO-Kmean-Transformer-BiLSTM负荷预测【含Matlab源码 6672期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-Bilstm预测 4.4.6 其他优化算法优化Kmeans-Transformer-Bilstm预测
Kimsuky 的⽹络钓⻥有效载荷战术原文版.pdf
08-02
Kimsuky 的⽹络钓⻥有效载荷战术原文版.pdf
奥维云网2024中国清洁电器产业与消费者洞察白皮书.pdf
08-02
【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云网】2024中国清洁电器产业与消费者洞察白皮书.pdf【奥维云
猎聘-2024高校毕业生就业数据报告.pdf
08-02
猎聘-2024高校毕业生就业数据报告.pdf
js如何判断是否在iframe中/JQuery调用iframe父页面元素与方法
08-25
### 回答1： 可以使用以下方法来判断是否在 iframe 中： ```javascript if (window.self !== window.top) { // 在 iframe 中 } else { // 不在 iframe 中 } ``` 在 jQuery 中，可以使用 `parent` 方法来调用 iframe 父页面的元素和方法： ```javascript // 获取父页面的元素 $(parent.document).find('#elementId'); // 调用父页面的方法 parent.methodName(); ``` ### 回答2： 要判断当前页面是否在iframe中，可以使用JavaScript的window对象的top属性来判断。如果top属性等于自身window对象，那么证明当前页面不在任何iframe中；如果top属性不等于自身window对象，那么证明当前页面在一个iframe中。 示例代码如下： ```javascript if (window.top === window){ console.log("当前页面不在任何iframe中"); } else { console.log("当前页面在一个iframe中"); } ``` 要在iframe中调用父页面的元素和方法，可以使用jQuery的parent()方法或者window.parent来获取父页面的元素或窗口对象，然后通过对象的方法来进行操作。 示例代码如下： ```javascript // 使用parent()方法获取父页面元素并进行操作 $("button", parent.document).click(function(){ // 在父页面中查找<button>元素，并添加点击事件处理函数 alert("在父页面中点击了按钮"); }); // 使用window.parent获取父页面窗口对象并进行操作 window.parent.postMessage("Hello from iframe", "*"); // 向父页面发送跨域消息 ``` 注意：在跨域的情况下，使用postMessage方法向父页面发送消息时，需要指定目标窗口的origin，以保证安全性。 ### 回答3： 在JS中，可以通过window对象的top属性判断当前页面是否在iframe中。若top属性等于当前window对象本身，则表示当前页面不在任何iframe中；若top属性指向其他window对象，则表示当前页面在一个iframe中。 以下是通过JS代码判断是否在iframe中的示例： ```javascript if (window.top === window.self) { console.log("当前页面不在iframe中"); } else { console.log("当前页面在iframe中"); } ``` 当需要在iframe中的页面中调用父页面的元素或方法时，可以使用jQuery来实现。jQuery可以通过使用窗口对象的parent属性来访问父页面的元素或方法。 以下是通过jQuery调用父页面的元素或方法的示例： ```javascript // 在iframe中调用父页面的元素 var parentElement = $(parent.document).find("#elementId"); // 在iframe中调用父页面的方法 parent.myFunction(); ``` 在以上示例中，通过$(parent.document)来选择父页面的DOM元素，再通过find()方法选择特定的元素。若需要调用父页面的方法，则使用parent对象直接调用方法即可。通过这种方式，可以在iframe中与父页面进行交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值