IFrame父子组件之间相互调用方法

最新推荐文章于 2025-07-11 17:56:16 发布
最新推荐文章于 2025-07-11 17:56:16 发布
阅读量3.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： IFrame
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/violetjack0808/article/details/72866576
本文介绍了如何在外部页面与IFrame内嵌页面之间进行方法调用。包括从外部调用IFrame内部的方法，以及从IFrame内部调用外部页面的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

工作中遇到一些使用了IFrame标签的页面，需要两者之间调用方法。所以查阅了一些资料。记录下。

外部调用IFrame里的方法

var frame = document.getElementById("frame_content")
frame.contentWindow.test()

IFrame里的界面调用外部界面方法

window.parent.test()
微前端父子应用及兄弟应用间组件或方法共享方案
Alice_124的博客
07-17 1217
不同的方案有各自的特点，需要根据具体的应用场景和需求进行权衡。
html iframe 子页面调用父页面的方法
yuxinSir的博客
07-21 549
还是附上代码吧。不多说，方便日后查看父页面代码：<!DOCTYPE html><html><head> <title>parents</title> <meta charset="UTF-8"></head><body><script language="javascript" type="text/jav...
父窗口调用iframe子窗口方法
03-14
NULL 博文链接：https://terryang.iteye.com/blog/292913
iframe 父窗口和子窗口相互的调用方法集锦
weixin_34125592的博客
10-18 271
一、父窗口调用iframe子窗口方法1、HTML语法：&lt;iframe name="myFrame" src="child.html"&gt;&lt;/iframe&gt;2、父窗口调用子窗口：myFrame.window.functionName();3、子窗品调用父窗口：parent.functionName();简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行4、父窗口...
vue2父子组件通信（含相互调用方法）
最新发布
m0_58880115的博客
07-11 493
父组件和子组件之间方法和数据的相互调用
iframe 调用父元素的方法
weixin_55837609的博客
04-09 851
1，子页面调用父页面方法 window.parent.reloadList(); 2，子页面调用顶级父页面方法 top.window.parent.reloadList(); 3，window.open打开的页面调用父页面方法 window.opener.reloadList(); 4，如果调用方法时报parent.reloadList not a function的时候，注意查看父页面方法是否写在window下，在其他 框架中声明的 方法和 变量是无法访问的 ...
面试题总结
qq_40200480的博客
02-20 156
1.Vue中父组件调用子组件的方法 this.$refs.name.methods() 2.子组件调用父组件的方法 1、在父组件中 通过v-on 监听 当前实例上的 自定义事件。 2、在子组件 中 通过'$emit'触发 当前实例上的 自定义事件。 3.面向对象 ...
iframe 父窗口和子窗口相互调用
tubaluer
11-08 130
一、父窗口调用iframe子窗口方法 1、HTML语法：&lt;iframe name="myFrame" src="child.html"&gt;&lt;/iframe&gt; 2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗口调用父窗口：parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent...
iframe的父子窗口之间的对象相互调用基本用法
12-09
使用iframe的时候，可能会涉及到父子窗口之间传值和方法的相互调用，之前一直有些迷糊，也没有着意去弄清楚，这两天要干活，没法子了只好把这都弄明白了。其实非常简单，就那么几个用法，几句代码而已。 子窗口中...
layer弹出层父子页面事件相互调用方法
10-18
在介绍layer弹出层父子页面事件相互调用方法之前，首先需要了解layer弹出层的基本使用方法。layer是一种轻量级的Web弹出层插件，它可以帮助开发者方便地实现弹出层的创建、配置以及管理。在使用layer弹出层时，通常...
layui框架中layer父子页面交互的方法分析
11-27
子页面则通过`doSubmit`方法处理用户选择，并调用父页面的`addRecord`方法传递数据。 通过以上的分析，我们可以看出layui的layer组件在iframe层中的交互功能非常灵活，能够满足开发者在多种场景下的需求。掌握这些...
如何使用iframe实现子、父页面之间的相互调用方法，详细讲解了iframe标签的使用，包括如何嵌入子页面及设置静态路径。
03-18
好的，用户想了解如何在Vue中使用iframe实现父子页面间的相互调用，以及iframe的基本使用方法，包括设置静态路径和具体的使用教程。首先，我需要整理一下iframe的基本用法，然后结合Vue的环境来说明如何嵌入子页面，...
web前端iframe相互调用方法详解
09-13
框架采用的是嵌入iframe机制，不可避免的要用到各个iframe页面之间方法和属性的相互调用。这里介绍的知识非常重要，不光是在QUICK UI框架中适用，在其他有关iframe的场合都适用。
父页面 调用 iframe的方法
wang_xuan_1992的博客
09-08 1794
父页面 <div class="image_content"> <iframe scrolling="yes" id='imgCon' scrolling=yes name="frame0" src="./imgContent.html"></iframe> </div> // An highlighted block //获取iframe var iframe = document.getElementById("tabList"); var iwi
多种方案教你实现iframe嵌套页面相互传参(父子通信)
热门推荐
tangdou369098655的博客
06-30 3万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
iframe 父子页面之间传值
cc
01-24 1182
1.父页面给子页面传值 父页面 /** * 发送消息 * @key 字段名 * @value 值 */ postMessage: function (key, value) { let iframe = $('iframe')[0]; if (iframe) { iframe.contentWindow.postMessage({ 'key': key, 'value': value }, ifra
父页面按钮调用iframe中的方法
weixin_40854257的博客
06-27 1683
写在前面：好像是有跨域和不跨域之分的，我没弄懂什么意思，不过我这个应该是没有跨域。 父页面A.jsp 1. iframe 的 name 很重要 2.调用iframe中所跳转的jsp里的 submitForm();方法 3.iframe跳转的jsp B.jsp 4.完成 ...
父子 iframe 传值
MichaelAn的博客
02-13 392
父子 iframe 传值 2021-11-03 最近项目中有个页面中使用到 iframe，涉及到不同 iframe 的传值等操作，踩坑不少，简单记录一下。 外部的页面称为父页面，内部嵌入的 iframe 称为子页面。一个父页面中可以嵌入多个子页面。不同子页面之间称为兄弟页面。 任务需要：父获取子的属性、子获取父的属性...
使用iframe的父子页面进行简单的相互传值
time141的博客
09-02 7242
使用iframe标签嵌套页面时，通过再父页面通过接口请求的数据，如何传给子页面呢？作为一个刚刚入门的前端小白，只有边百度边写demo，研究一下iframe的父子页面的传值，如果有什么不对的地方请大家指出。 父页面：father.html,子页面:son.html 1、 ...
轻松实现跨域iframe父子传值示例
通过iframe，开发者可以将外部网页的内容嵌入到当前页面中显示，这对于展示第三方网页或组件化网页设计非常有用。然而，使用iframe也会带来一些问题，例如跨域问题。跨域问题是指当前页面的域名与iframe中嵌入页面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值