js调用iframe里的方法编程频道|福州电脑网

2024年4月28日发(作者：)

JS调用iframe里的方法

在前端开发中，我们经常会使用iframe（内联框架）来嵌入其他网页或者内容。

而有时候，我们需要在父页面中调用iframe中的方法来实现一些交互功能。本文

将详细介绍如何使用JavaScript来调用iframe里的方法。

什么是iframe？

首先，让我们来了解一下什么是iframe。iframe是HTML中的一个元素，用于在一

个网页中嵌入另一个网页。它可以实现网页之间的互相调用和通信。

通过使用

</p><p style="text-indent: 2em;font-size:18px;">标签，我们可以在父页面中插入一个子页面，并且可以通过</p><p style="text-indent: 2em;font-size:18px;">JavaScript来操作和控制子页面。 </p><p style="text-indent: 2em;font-size:18px;">在父页面中调用iframe里的方法 </p><p style="text-indent: 2em;font-size:18px;">要在父页面中调用iframe里的方法，我们需要以下几个步骤： </p><p style="text-indent: 2em;font-size:18px;">1. 获取到对应的iframe元素 </p><p style="text-indent: 2em;font-size:18px;">2. 使用</p><p style="text-indent: 2em;font-size:18px;">contentWindow</p><p style="text-indent: 2em;font-size:18px;">属性获取到子页面窗口对象 </p><p style="text-indent: 2em;font-size:18px;">3. 使用窗口对象来调用子页面内部的方法 </p><p style="text-indent: 2em;font-size:18px;">下面是一个示例代码： </p><p style="text-indent: 2em;font-size:18px;">// 获取到对应的iframe元素</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">const iframe = mentById('myIframe');</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">// 使用contentWindow属性获取到子页面窗口对象</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">const iframeWindow = tWindow;</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">// 调用子页面内部的方法</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">od();</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">首先，我们通过</p><p style="text-indent: 2em;font-size:18px;">getElementById</p><p style="text-indent: 2em;font-size:18px;">函数获取了id为”myIframe”的iframe元素。然</p><p style="text-indent: 2em;font-size:18px;">后，通过访问</p><p style="text-indent: 2em;font-size:18px;">contentWindow</p><p style="text-indent: 2em;font-size:18px;">属性，我们得到了子页面的窗口对象。最后，我们可</p><p style="text-indent: 2em;font-size:18px;">以使用窗口对象来调用子页面内部的方法。 </p><p style="text-indent: 2em;font-size:18px;">需要注意的是，调用iframe内部方法时，必须保证iframe和父页面在同一个域名</p><p style="text-indent: 2em;font-size:18px;">下。否则，由于浏览器的同源策略限制，将无法进行跨域访问。 </p><p style="text-indent: 2em;font-size:18px;">在iframe中定义可调用的方法 </p><p style="text-indent: 2em;font-size:18px;">上述示例代码中使用了</p><p style="text-indent: 2em;font-size:18px;">myMethod()</p><p style="text-indent: 2em;font-size:18px;">来调用子页面中的方法。那么，在子页面中我们</p><p style="text-indent: 2em;font-size:18px;">应该如何定义这个可调用的方法呢？ </p><p style="text-indent: 2em;font-size:18px;">在子页面中，我们需要将要暴露给父页面调用的方法定义在全局作用域下。例如： </p><p style="text-indent: 2em;font-size:18px;">// 子页面中定义可调用的方法</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">function myMethod() {</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">// 实现具体逻辑</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">}</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">通过将这个函数定义在全局作用域下（或者使用其他方式使其成为全局可访问），</p><p style="text-indent: 2em;font-size:18px;">我们就可以在父页面中通过上述代码来调用这个方法了。 </p><p style="text-indent: 2em;font-size:18px;">跨域通信 </p><p style="text-indent: 2em;font-size:18px;">前面提到过，在进行跨域通信时，由于浏览器的同源策略限制，可能无法直接调用</p><p style="text-indent: 2em;font-size:18px;">iframe内部的方法。但是，我们可以通过一些技术手段来实现跨域通信。 </p><p style="text-indent: 2em;font-size:18px;">使用postMessage </p><p style="text-indent: 2em;font-size:18px;">postMessage</p><p style="text-indent: 2em;font-size:18px;">是HTML5提供的一种跨文档消息传递机制。它允许在不同窗口之间进</p><p style="text-indent: 2em;font-size:18px;">行安全的跨域通信。 </p><p style="text-indent: 2em;font-size:18px;">在父页面中，我们可以使用</p><p style="text-indent: 2em;font-size:18px;">postMessage</p><p style="text-indent: 2em;font-size:18px;">方法将消息发送给iframe内部。在子页</p><p style="text-indent: 2em;font-size:18px;">面中，我们可以通过监听</p><p style="text-indent: 2em;font-size:18px;">message</p><p style="text-indent: 2em;font-size:18px;">事件来接收并处理这些消息。 </p><p style="text-indent: 2em;font-size:18px;">下面是一个示例代码： </p><p style="text-indent: 2em;font-size:18px;">// 父页面中发送消息给iframe内部</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">const iframe = mentById('myIframe');</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">ssage('Hello from parent', '*');</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">// 子页面中接收并处理消息</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">ntListener('message', function(event) {</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> if ( === ' {</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> ('Received message from parent:', );</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> }</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">});</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">在父页面中，我们使用</p><p style="text-indent: 2em;font-size:18px;">postMessage</p><p style="text-indent: 2em;font-size:18px;">方法将消息”Hello from parent”发送给了</p><p style="text-indent: 2em;font-size:18px;">iframe内部。需要注意的是，第二个参数’*’表示允许向任意域名的窗口发送消</p><p style="text-indent: 2em;font-size:18px;">息。 </p><p style="text-indent: 2em;font-size:18px;">在子页面中，我们通过监听</p><p style="text-indent: 2em;font-size:18px;">message</p><p style="text-indent: 2em;font-size:18px;">事件来接收并处理父页面发送过来的消息。通</p><p style="text-indent: 2em;font-size:18px;">过判断</p><p style="text-indent: 2em;font-size:18px;"></p><p style="text-indent: 2em;font-size:18px;">属性，我们可以确保只处理来自指定域名（例如’）的消息。 </p><p style="text-indent: 2em;font-size:18px;">使用 </p><p style="text-indent: 2em;font-size:18px;">另一种跨域通信的方法是使用</p><p style="text-indent: 2em;font-size:18px;"></p><p style="text-indent: 2em;font-size:18px;">属性。这个属性允许我们在不同窗口之</p><p style="text-indent: 2em;font-size:18px;">间共享数据。 </p><p style="text-indent: 2em;font-size:18px;">首先，在父页面中，我们可以将要传递给子页面的数据赋值给</p><p style="text-indent: 2em;font-size:18px;"></p><p style="text-indent: 2em;font-size:18px;">属性： </p><p style="text-indent: 2em;font-size:18px;"> = 'Hello from parent';</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">然后，在子页面中，我们可以通过读取和解析父页面传递过来的数据： </p><p style="text-indent: 2em;font-size:18px;">const data = ();</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">('Received data from parent:', data);</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">需要注意的是，由于</p><p style="text-indent: 2em;font-size:18px;"></p><p style="text-indent: 2em;font-size:18px;">属性在页面刷新后会被重置，因此需要在子页面</p><p style="text-indent: 2em;font-size:18px;">中尽早读取和解析数据。 </p><p style="text-indent: 2em;font-size:18px;">总结 </p><p style="text-indent: 2em;font-size:18px;">通过使用JavaScript，我们可以方便地在父页面中调用iframe里的方法。我们可</p><p style="text-indent: 2em;font-size:18px;">以通过获取iframe元素、使用</p><p style="text-indent: 2em;font-size:18px;">contentWindow</p><p style="text-indent: 2em;font-size:18px;">属性和窗口对象来实现调用。同时，</p><p style="text-indent: 2em;font-size:18px;">如果存在跨域问题，我们可以使用</p><p style="text-indent: 2em;font-size:18px;">postMessage</p><p style="text-indent: 2em;font-size:18px;">或者</p><p style="text-indent: 2em;font-size:18px;"></p><p style="text-indent: 2em;font-size:18px;">等技术手段来实</p><p style="text-indent: 2em;font-size:18px;">现跨域通信。这些方法为前端开发提供了更多灵活的交互和通信方式。 </p><p style="text-indent: 2em;font-size:18px;">希望本文能够对你理解和应用JavaScript调用iframe里的方法有所帮助！ </p><p><p><h2></h2></p></img></p></div></article></div><div class="fzithome-com info"><div><span>本文发布于:2024-04-28，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="http://www.fzithome.com/xitong/1714238904a512305.html" title="js调用iframe里的方法">http://www.fzithome.com/xitong/1714238904a512305.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/421.html" target="_blank">页面</a><a href="/tag/374.html" target="_blank">调用</a><a href="/tag/158.html" target="_blank">方法</a><a href="/tag/146.html" target="_blank">使用</a><a href="/tag/211.html" target="_blank">属性</a></span></div><div class="fzithome-com post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/512305.html?safe_token=qbWTJWA9gMgIt5Wj9D2nksC_2FfFXosF_2FaKBbmlTjNnYb2xU2XGbN25gK4hKsbBr9a4z6YtlZXPt2Gl45ezUQZag_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="fzithome-com tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5"></textarea></div></div><div class="fzithome-com psumbit"><input name="sumbit" type="submit" tabindex="6" value="发布" class="button" /></div></form></div><div class="fzithome-com commentlist"><div class="fzithome-com comment-tab"><div class="fzithome-com come-comt">评论列表<span id="comment_count">（有<span id="infocommentnumarea" style="color:#c81111">0</span>条评论）</span></div></div><ul class="diy-comment"></ul></div></div></div><div class="fzithome-com mainr"><div class="widget widget_previous"><h4 class="bar">最近发表</h4><ul><li><a href="/xitong/1700736870a1.html"title='mdb文件使用说明' aria-label='mdb文件使用说明'>mdb文件使用说明</a></li><li><a href="/xitong/1700738017a57.html"title='CIS本地元件ACCESS数据库创建及加载方法详解' aria-label='CIS本地元件ACCESS数据库创建及加载方法详解'>CIS本地元件ACCESS数据库创建及加载方法详解</a></li><li><a href="/xitong/1700738155a64.html"title='WordExcel与Access之间的数据交换' aria-label='WordExcel与Access之间的数据交换'>WordExcel与Access之间的数据交换</a></li><li><a href="/xitong/1700739811a136.html"title='CXAX快捷键' aria-label='CXAX快捷键'>CXAX快捷键</a></li><li><a href="/xitong/1700740924a186.html"title='Mono.Cecil说明文档翻译' aria-label='Mono.Cecil说明文档翻译'>Mono.Cecil说明文档翻译</a></li><li><a href="/xitong/1700741659a219.html"title='ZKTime5.0考勤软件本常见问题处理办法.docx' aria-label='ZKTime5.0考勤软件本常见问题处理办法.docx'>ZKTime5.0考勤软件本常见问题处理办法.docx</a></li><li><a href="/xitong/1700742076a238.html"title='deskpro常见问题的解决办法' aria-label='deskpro常见问题的解决办法'>deskpro常见问题的解决办法</a></li><li><a href="/xitong/1700746106a430.html"title='如何彻底删除电脑中所有的历史记录' aria-label='如何彻底删除电脑中所有的历史记录'>如何彻底删除电脑中所有的历史记录</a></li><li><a href="/xitong/1700748209a534.html"title='最新' aria-label='最新'>最新</a></li><li><a href="/xitong/1700751237a678.html"title='最近时政热点新闻6篇' aria-label='最近时政热点新闻6篇'>最近时政热点新闻6篇</a></li><li><a href="/xitong/1700751570a696.html"title='如何避免虚假新闻报道' aria-label='如何避免虚假新闻报道'>如何避免虚假新闻报道</a></li><li><a href="/xitong/1700752138a723.html"title='版面突出聚焦热点注重策划——解析京报网“主题新闻”的编辑特色' aria-label='版面突出聚焦热点注重策划——解析京报网“主题新闻”的编辑特色'>版面突出聚焦热点注重策划——解析京报网“主题新闻”的编辑特色</a></li><li><a href="/xitong/1700752484a740.html"title='新闻选题策划书格式' aria-label='新闻选题策划书格式'>新闻选题策划书格式</a></li><li><a href="/xitong/1700754516a844.html"title='融媒体时代河北经视《今日资讯》舆论引导能力提升探讨' aria-label='融媒体时代河北经视《今日资讯》舆论引导能力提升探讨'>融媒体时代河北经视《今日资讯》舆论引导能力提升探讨</a></li><li><a href="/xitong/1700759929a1101.html"title='win7系统备份和还原' aria-label='win7系统备份和还原'>win7系统备份和还原</a></li><li><a href="/xitong/1700760212a1116.html"title='放弃一键还原GHOST!!使用强大WIN7自带备份安全才是最重要的!!' aria-label='放弃一键还原GHOST!!使用强大WIN7自带备份安全才是最重要的!!'>放弃一键还原GHOST!!使用强大WIN7自带备份安全才是最重要的!!</a></li><li><a href="/xitong/1700760372a1125.html"title='ghost使用图解' aria-label='ghost使用图解'>ghost使用图解</a></li><li><a href="/xitong/1700761691a1196.html"title='深度一键还原' aria-label='深度一键还原'>深度一键还原</a></li><li><a href="/xitong/1700767273a1510.html"title='笔记本常见问题以及解决方法' aria-label='笔记本常见问题以及解决方法'>笔记本常见问题以及解决方法</a></li><li><a href="/xitong/1700768513a1580.html"title='风扇调速电路原理' aria-label='风扇调速电路原理'>风扇调速电路原理</a></li></ul></div><section id="aside_about" class="widget widget_aside_about sb br mb"><div class="avatar"><img class="img" src="/view/template/mitiqin/img/tx.jpg" alt="编程教学|福州电脑网"/></div><div class="wrap pd"><p class="title">编程教学|福州电脑网</p><p class="info">编程教学</p><ul class="ul clearfix"></ul></div></section><div class="fzithome-com clear"></div><div class="fzithome-com widgets"><h4 class="bar">相关推荐</h4><div class="fzithome-com hot-post"><ul class="clearfix"><li><a href="/xitong/1715593068a578740.html"title='chocolatey 用法 -回复' aria-label='chocolatey 用法 -回复'><span class="sptit">chocolatey 用法 -回复</span></a></li><li><a href="/xitong/1715604965a579365.html"title='k3客户端的配置及应用问题解决' aria-label='k3客户端的配置及应用问题解决'><span class="sptit">k3客户端的配置及应用问题解决</span></a></li><li><a href="/xitong/1715615291a579910.html"title='360防火墙怎么样阻止程序联网' aria-label='360防火墙怎么样阻止程序联网'><span class="sptit">360防火墙怎么样阻止程序联网</span></a></li><li><a href="/xitong/1715617949a580066.html"title='无法格式化的原因' aria-label='无法格式化的原因'><span class="sptit">无法格式化的原因</span></a></li><li><a href="/xitong/1715627383a580550.html"title='Win8USB安装制作全程录' aria-label='Win8USB安装制作全程录'><span class="sptit">Win8USB安装制作全程录</span></a></li><li><a href="/xitong/1715652602a581869.html"title='win10更新并关机解决方法' aria-label='win10更新并关机解决方法'><span class="sptit">win10更新并关机解决方法</span></a></li><li><a href="/xitong/1715655779a582041.html"title='用UISO制作U盘来使用GHOST系统' aria-label='用UISO制作U盘来使用GHOST系统'><span class="sptit">用UISO制作U盘来使用GHOST系统</span></a></li><li><a href="/xitong/1715658782a582183.html"title='win7无线功能开启方法' aria-label='win7无线功能开启方法'><span class="sptit">win7无线功能开启方法</span></a></li><li><a href="/xitong/1715663694a582432.html"title='关于OA协同办公软件平台升级的申请(10.2升级到12.4)' aria-label='关于OA协同办公软件平台升级的申请(10.2升级到12.4)'><span class="sptit">关于OA协同办公软件平台升级的申请(10.2升级到12.4)</span></a></li><li><a href="/xitong/1715674521a582954.html"title='win10注册表red add字符串中包含空格、双引号等特殊字符的处理方法_百' aria-label='win10注册表red add字符串中包含空格、双引号等特殊字符的处理方法_百'><span class="sptit">win10注册表red add字符串中包含空格、双引号等特殊字符的处理方法_百</span></a></li><li><a href="/xitong/1715675518a583003.html"title='adams打不开问题解决办法汇总' aria-label='adams打不开问题解决办法汇总'><span class="sptit">adams打不开问题解决办法汇总</span></a></li><li><a href="/xitong/1715681421a583327.html"title='Win10系统开机黑屏怎么办?Win10系统开机黑屏解决方法' aria-label='Win10系统开机黑屏怎么办?Win10系统开机黑屏解决方法'><span class="sptit">Win10系统开机黑屏怎么办?Win10系统开机黑屏解决方法</span></a></li><li><a href="/xitong/1715683489a583436.html"title='在Windows系统中关闭自动更新的高效设置方法和技巧' aria-label='在Windows系统中关闭自动更新的高效设置方法和技巧'><span class="sptit">在Windows系统中关闭自动更新的高效设置方法和技巧</span></a></li><li><a href="/xitong/1715683633a583445.html"title='让Windows停止自动更新的方法' aria-label='让Windows停止自动更新的方法'><span class="sptit">让Windows停止自动更新的方法</span></a></li><li><a href="/xitong/1715684002a583468.html"title='如何关闭Windows系统的自动安装更新' aria-label='如何关闭Windows系统的自动安装更新'><span class="sptit">如何关闭Windows系统的自动安装更新</span></a></li><li><a href="/xitong/1715697624a584141.html"title='Win10如何调回Win7经典任务管理器' aria-label='Win10如何调回Win7经典任务管理器'><span class="sptit">Win10如何调回Win7经典任务管理器</span></a></li><li><a href="/xitong/1715698828a584203.html"title='台式机如何去进入bios' aria-label='台式机如何去进入bios'><span class="sptit">台式机如何去进入bios</span></a></li><li><a href="/xitong/1715703275a584440.html"title='手把手教你修改Ghostxp镜像' aria-label='手把手教你修改Ghostxp镜像'><span class="sptit">手把手教你修改Ghostxp镜像</span></a></li><li><a href="/xitong/1715704108a584487.html"title='大学生电脑用什么系统比较好-适合大学生使用的Win10系统' aria-label='大学生电脑用什么系统比较好-适合大学生使用的Win10系统'><span class="sptit">大学生电脑用什么系统比较好-适合大学生使用的Win10系统</span></a></li><li><a href="/xitong/1715710464a584826.html"title='PCOS技术历史版本下载' aria-label='PCOS技术历史版本下载'><span class="sptit">PCOS技术历史版本下载</span></a></li></ul></div></div><div class="fzithome-com clear"></div><div class="widget widget_tags"><h4 class="bar">标签列表</h4><ul><li class="submenu"><a target="_blank" href="/tag/24077.html">赢得</a></li><li class="submenu"><a target="_blank" href="/tag/23967.html">链家</a></li><li class="submenu"><a target="_blank" href="/tag/23911.html">偷窃</a></li><li class="submenu"><a target="_blank" href="/tag/23893.html">建库</a></li><li class="submenu"><a target="_blank" href="/tag/23864.html">特质</a></li><li class="submenu"><a target="_blank" href="/tag/23845.html">发峰</a></li><li class="submenu"><a target="_blank" href="/tag/23835.html">抽油泵</a></li><li class="submenu"><a target="_blank" href="/tag/23821.html">工作作风</a></li><li class="submenu"><a target="_blank" href="/tag/23795.html">类目</a></li><li class="submenu"><a target="_blank" href="/tag/23794.html">浮栅</a></li><li class="submenu"><a target="_blank" href="/tag/23769.html">反交</a></li><li class="submenu"><a target="_blank" href="/tag/23760.html">同台</a></li><li class="submenu"><a target="_blank" href="/tag/23751.html">线径</a></li><li class="submenu"><a target="_blank" href="/tag/23733.html">汇兑</a></li><li class="submenu"><a target="_blank" href="/tag/23724.html">密集</a></li><li class="submenu"><a target="_blank" href="/tag/23721.html">冷备</a></li><li class="submenu"><a target="_blank" href="/tag/23675.html">驳倒</a></li><li class="submenu"><a target="_blank" href="/tag/23646.html">轴重</a></li><li class="submenu"><a target="_blank" href="/tag/23615.html">编配</a></li><li class="submenu"><a target="_blank" href="/tag/23614.html">钢琴伴奏</a></li></ul></div><div class="fzithome-com clear"></div></div></div><footer id="footer"><div class="footer container-w cl"><div class="fnav"></div><span class="copy"> CopyRight © 2022 All Rights Reserved <a href="/" title="编程教学|福州电脑网" target="_blank">编程教学|福州电脑网</a></span></div></footer><script src="/view/template/mitiqin/js/common.min.js?2.3.0"></script><script src="/view/js/xiuno.js"></script><script src="/view/template/mitiqin/js/app.js?2.3.0"></script><div id="gotop"><div style="display: none; margin-bottom:5px;" id="goTopBtn"><a title="返回顶部" class="gotopa"><span class="iconfont icon-rocket-fill"></span></a></div></div></body></html>