如何获取网页兄弟iframe里的元素,如何调用网页兄弟iframe里的事件

最新推荐文章于 2023-06-16 11:26:41 发布
原创 最新推荐文章于 2023-06-16 11:26:41 发布 · 1.3k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
javascript学习总结

当前文章被收录于：

javascript学习总结
21 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了一种使用JavaScript从一个iframe访问另一个同级iframe中的元素的方法。通过获取父文档中的iframe元素，进而操作其内部的内容文档，实现对目标iframe内元素的操作，如点击按钮等。

使用Js方法，如何获取网页兄弟iframe里的元素，如何调用网页兄弟iframe里的事件？

一、案例：

....

<body>

<iframe id="a1"><input type="button" id="btn_Search" onclick=""/></iframe>

<iframe id="a2"></iframe>

</body>

....

 

二、使用Js方法，在a2页面，获取a1页面的元素

//找兄弟a1的iframe
let iframe = parent.document.getElementById("a1");
//找iframe里的document（某些浏览器不支持contentDocument，需结合contentWindow.document使用）
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
//对iframe里的元素操作(有时候能找到，但不触发，需要重新打开网站)
iframeDocument.getElementById("btn_Search").click();

标签
#iframe #js #html
iframe兄弟页面相互调用
07-06
内涵iframe子页面调用兄弟页面的demo console 输出函数的自定义方法
使用 js / jQuery获取iframe中的元素
css_666的博客
02-08 1599
1.在父页面中获取子iframe中的元素： js: window.frames["iframe的name值"].document.getElementById("iframe中控件的ID"); jQuery: $("#iframe的ID").contents().find("#目标元素的ID") 注意：在获取子页面的时候，如果子页面尚未加载完毕，上述方法会获取不到。尽量不要在...
iframe中调用兄弟iframe和父iframe中的元素
qq_35449428的博客
08-19 1112
今天在做项目时，遇到了在一个iframe中调用兄弟iframe中的元素，现实开发中难免会遇到子页面、父页面相互操作的情况，由于时不时地会遇到几次（不是一次），所以就整理了一下父子页面相互相互调用常见的方法，作为自己的备忘录，同时也希望对大家有帮助。 下面话不多说了，来一起看看详细的介绍吧。 父页面代码 main.html 如下： <!DOCTYPE html> <html ...
iframe父页面调用子页面方法，并且获取数据（无跨域）
weixin_48195664的博客
06-16 3127
以上就是 iframe父页面调用子页面方法，并且获取数据（无跨域）最难部分就是跨越了。一定要注意：父子页面两边都要监听，子页面监听父页面传过来的参数，再根据参数判断调取哪个方法。父页面监听子页面传过来的数据。(注意：VUE的话将此方法写在mounted里边，如果是多次调取此方法的话，就换成window.onmessage=(e)=>{}2. 监听父页面传过来的参数来判断调取哪个方法。
Js/Jquery获取iframe中的元素（window、document）
menghuanzhiming的博客
12-09 4229
参考地址： 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...
iframe的快速使用及方法的调用（HTML中引入另一个HTML文件）
z1093541823的博客
04-14 2579
iframe的快速使用及方法的调用； HTML中引入另一个html文件；
layui里 同级兄弟layer里的iframe方法调用
qq_24687915的博客
06-05 1574
比如我们有一个页面A，然后页面B和C是其子页面，在页面A中打开B页面，然后咋B中用parent.layer.open，打开C页面，这样B和C就是A页面下的同级（兄弟）页面（也可以是在A中直接打开B和C）。 其实就是在打开的时候设置id，这个id会是layeriframe外面一层div的id，获得它自然能够获得其中的iframe A中打开B layer.open({ id:"layer-iframe-B", //此处与添加layer的id一样，由于两页面不会同时打开，所以.
iframe父子兄弟之间调用传值(contentWindow && parent)
linjcai的博客
07-26 1328
学习一个知识点最好的方法就是自己动手去的实现一些简单的helloworld，虽然可以在网上可以找到很多总结，但自己实现的过程才是自己的，期间遇到问题并解决问题的过程也会让自己记忆理解更加深刻。 更多
iframe 框架 父页面与子界面之间的变量、函数、元素获取
dljm328963024的博客
03-25 579
1、获取页面上的iframe 　　1-1、 document.getElementById('iframeId')； 　　1-2、 window.frames[0]、window.frames['frameName']、frames['frameName']、frames[0]、self.frames[0]，此处self与window等价，相当于本页面的window对象。 　　1-...
html 同一页面两iframe互传值,内嵌页面iframe以及和其兄弟iframe的相互传值
weixin_31620365的博客
06-03 1185
主要知识点1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWindow得到iframe包含页面的window对象，然后就可以正常访问页面元素了；2：$("#ii")[0].contentWindow 如果用jquery选择器获得iframe，需要加一个【0】；3：$("#ii")[0].contentWi...
IFRAME 元素 | iframe 对象
mmllkkjj的专栏
01-14 1051
<br />创建内嵌浮动框架。 <br />成员表 <br />下面的表格列出了 iframe 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。 <br />标签属性/属性 <br />SHOW: <br /> 标签属性/属性 <br /> 行为 <br /> 集合 <br /> 事件 <br /> 滤镜 <br /> 方法 <br /> 对象 <br /> 样式 <br /> 标签属性 属性 描述 <br /> ALIGN align 设置或获取表格排列。 <br />
Iframe 用法的详细讲解
kurt
11-24 1859
Iframe 用法的详细讲解把iframe解释成“浏览器中的浏览器“很是恰当&lt;iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src=http://www.163.com&gt;&lt;/iframe&gt;&lt;IFRAME&gt;用于设置文本或图形的浮动图文框或容器...
刷新兄弟iframe
wztwzt7576的博客
05-07 225
在一个iframe中刷新兄弟iframe： window.parent.frames["列表iframe名字"].location="兄弟iframe的url"   不要用： window.parent.frames["列表iframe名字"].location.reload();
iFrame的用法
happycyp的专栏
10-27 1834
=============================================================================Iframe src="example.htm" width="300" heitht="100">example.htm 是被嵌入的页面，标签 还有一些可用的参数设置如下：marginwidth:网页中内容在表格右侧的预留宽度；例如：marg
(转)iframe的详细用法[资料保存]
sophia9123的专栏
03-07 2050
IFRAME 元素 | iframe 对象 -------------------------------------------------------------------------------- 创建内嵌浮动框架。 成员表 下面的表格列出了 iframe 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。 标签属性/属性 SHOW: 标签属性/属性 行为
Jquery获取iframe中的元素
weixin_33827731的博客
04-14 125
iframe与父页面之间相互获取元素的方法： 1、从父页面中获取iframe页面中的元素： 用法： $(window.frames["iframe_include_adverse"].document).find() 如：$(window.frames["iframe_include_adverse"].document).find("input:not(:hidden[name*='_']...
IMG,IFRAME的属性参考
chenqunan3231的博客
03-09 130
I 元素 | i 对象 IMG 元素 | img 对象 DHTML 对象 IFRAME 元素 | iframe 对象 -------------------------------------------------------------------------------- 创建内嵌浮动框...
用iframe做网页的全部讲解和使用方法
hank4ever
12-17 898
iframe是一种避开框架方式的嵌入网页 基本用法如下 Iframe 用法浅析 解释成“浏览器中的浏览器“很是恰当 用于设置文本或图形的浮动图文框或容器。 BORDER 设定围绕图文框的边缘宽度 FRAMEBODER 设置边框是不否为3维（0=否，1=是） HEIGHT,WIDTH 设质边框的宽度和高度 S...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值