js，iframe.父子页面通信

最新推荐文章于 2025-10-22 11:19:31 发布
原创 最新推荐文章于 2025-10-22 11:19:31 发布 · 497 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在父页面与子页面(iframe)之间进行方法调用。包括父页面调用子页面方法的方式，以及子页面调用父页面方法的实现。

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

 

其中FrameName为iframe的name。  childMethod();为定义在iframe页面中的js方法。

parentMethod();为定义在iframe的上级窗口的方法。子页面通过parent.window获取上级页面的window对象。

 

 

参考文献：https://www.cnblogs.com/sydeveloper/p/3712863.html

iframe父子页面通信
起风了
11-25 169
iframe获取当前子页面url parent.document.getElementById("ID name").contentWindow.location.href 父子页面通信 子传父 //子页面给父传值 var param = {'msg':true}; window.parent.postMessage(param,'*'); //父接收子页面传值 window.addEventListener('message', function(e) { e.data.msg } 父传子 //父
iframe与父级页面通信方式
专注
01-10 1533
如果父页面和iframe是通过框架（如 React、Vue）开发的，可以使用自定义事件机制。' } });iframe});
iframe父页面与子页面通信及相互调用方法
09-13
本Demo汇总是iframe父页面与iframe子页面如何相互调用方法、元素及值的几种常见方法（含JS、JQuery方法）
iframe与父页面通信全解：实现值传递与方法互调的多种方案
最新发布
weixin_42608318的博客
10-22 1033
要在iframe中成功调用父页面函数，首先必须确保这些函数在父级作用域中是可访问的。由于iframe运行在一个独立的 JavaScript 执行环境中，它无法直接访问父页面的局部变量或闭包内的函数，因此必须将目标函数挂载到全局对象window上。例如，父页面可以定义如下函数：console.log('父页面状态更新:', status);上述代码将两个函数和closeModal显式挂载至window全局对象，使其可在iframe内通过或被调用。
js 的 iframe 父子页面通信的简单方法
weixin_34198453的博客
02-06 160
2019独角兽企业重金招聘Python工程师标准>>> ...
Js 和 iframe 通信
weixin_42246483的博客
01-20 382
最近项目中要求网站和游戏进行通信，将网站中余额传给iframe，自己查资料后解决了，特地写篇文章记录下，这也是我的第一篇文章-，- js和 iframe <div> <iframe width="100%" height="800px;" style="border: none;" id="child" :src="iframe_url"></iframe&g...
iframe通信，window.postMessage父子项目数据通信
weixin_45890414的博客
02-04 731
如果你在子项目中使用 window.addEventListener(‘message’, …) 来监听消息，但收到的 event.data 类型是 “webpackWarnings”，这可能是因为你的监听器在Webpack开发服务器的环境下也会接收到一些Webpack相关的警告信息。
如何实现iframe父子传参通信
10-15
`iframe`的父子通信可以让我们实现不同页面间的交互，无论是同源策略下的非跨域通信，还是需要应对跨域场景。下面我们将详细介绍这两种情况下的实现方式。 ### 非跨域通信 #### 父调子 在非跨域情况下，父页面...
利用JS对iframe父子（内外）页面进行操作的方法教程
10-19
本文将详细介绍如何利用JS对iframe父子页面进行交互。首先，我们要明白的是，只有在同源策略允许的情况下，父子页面才能互相操作，否则会受到浏览器的安全限制。 ### 一、获取iframe中的内容 1. **获取iframe的...
iframe页面跨域父子传参通信
FantasyWeirdo的博客
08-05 2475
基本概念： window.self: 当前窗口自身的引用 window.parent: 上一级父窗口的引用 window.top: 最顶层窗口的引用 当页面中不存在 iframe 嵌套时，则三者均是当前窗口自身的引用。 同域iframe相互调用： 子页面调用父页面方法：window.parent.fatherFn(); 父页面调用子页面方法： window.sonFrameName.sonFn(); (sonFrameName是iframe的name值) 非跨域 父调子 //父页面 <button c
iframe之父子页面通信
yiyueqinghui的博客
08-05 8533
1、获取 子页面 的 window 对象 获取 子页面 的 window 对象 ，即获取了子页面的所有变量和方法，获取方法如下： // iframe id document.getElementById('menuIframe').contentWindow // iframe name window.frames['menuIframe'].window // iframe index 当前窗体的第几个 iframe window.frames[1].window 2、子 iframe 获取 父
Iframe父页面子页面通信
weixin_42333548的博客
09-30 3536
iframe子页面与父页面通信方案 一：父页面（调用iframe的页面） 第一步：页面中引入iframe <iframe id="PanIframe" ref={iframeRef} frameBorder={0} width={960} height={600} marginHeight={0} scrolling="no" sr
Iframe 父子页面通信
老程的博客
06-27 708
Iframe 父子页面通信； 兼容异步加载、异步接收等异步问题
JavaScript iframe 父子页面通信
qq_33932956的博客
10-18 223
1、子页面向父页面发送消息 varparentData = {username: 'wuzhou', age: "29"}; window.parent.postMessage(parentData,'*'); 2、父页面向子页面发送消息 var data = {username: 'wuzhou', age: "29"}; window.frames[0].postMessa...
iFrame父子页面相互通信
xjakmy的博客
06-02 462
应用场景： 在父页面（或子页面）发生相应动作，例如click点击事件等，在子页面（或父页面）进行对应的事件相应 描述： 以HT for web（图扑软件）为例，对父页面进行监听，根据业务需要，当点击对应组件时，发送消息给子页面，同时对子页面进行监听，收到父页面的消息后做出响应 父页面传递消息给子页面： // 此方法写在父页面中 function iframeMessage(message){ let iframe = $('#iframe')[0]; iframe.content
JS操作iframe父子页面完全指南
"本文主要探讨了如何利用JavaScript对iframe元素及其内部页面进行操作，包括获取iframe内容、执行脚本以及实现父子页面间的通信。" 在Web开发中，iframe（Inline Frame）是一种常用的嵌入外部网页或者同一网站不同...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值