iframe框架之间js方法相互调用及数据传递

最新推荐文章于 2025-10-22 11:19:31 发布
转载 最新推荐文章于 2025-10-22 11:19:31 发布 · 5.4k 阅读 · 1

本文通过一个具体的HTML页面示例，展示了如何在一个包含两个iframe的顶级页面top.html中实现跨iframe的JavaScript函数调用。主要介绍了如何从顶级页面调用子iframe页面中的函数，以及从一个iframe页面调用另一个iframe页面中的函数。

在一个叫top.html的页面定义两个iframe和两个方法

复制代码
<iframe id="gg" name="gg" src="gg.html" width="500" height="200"></iframe>

<iframe id="dd" name="dd" src="dd.html" width="500" height="200"></iframe>

<script type="text/javascript">
   function top()
   {
    alert("top");
    }   
   //调用子框架gg.html页面中的gg函数，并把“我在top里呼唤gg”传给gg()
   function  top_gg(){
    window.frames["gg"].gg("我在top里呼唤gg");
    }
</script>
复制代码

在gg.html写两个方法调用

复制代码
<script type="text/javascript">
//调用顶层框架中的top函数
function() gg_top{
     top.top();
     })
function gg(t){
    alert(t);
    }
</script>
复制代码

在dd.html写一个方法调用

<script type="text/javascript">
     //在dd.html中调用gg.html中dd_gg()function() dd_gg{
     parent.window.frames["gg"].gg("在dd中呼唤gg");
     })
</script>

 

iframe跨域传输数据（二）---- MessengerJS ； 实现子页面父页面数据传输；
JYX8
05-10 2514
做两个不同的项目，iframe嵌入并跨域传输数据；之前写过一篇文章，如何简单的处理跨域的问题，及一种比较笨拙的解决方案；以中间页面（html）,做数据传输的中转站； 这次找到了一个插件，MessengerJS 来做数据通信，才发现这个封装好的插件做这种跨域的方式其实很简单；这里就简单的分析 一下这MessengerJS，代码比较少，没那么多140行加注释； 主要是用到H5的通信协议postM
js iframe 方法及元素相互调用
03-08
js iframe 方法及元素相互调用 js调用iframe方法
iframe子页面与父页面在同域或不同域下的js通信
01-21
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。 一、同域下父子页面的通信 父页面parent.html 代码如下: <html> <head> [removed] function say(){ alert(“parent.html”); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById(“button”).value=”调用结束”; } [removed] </head> <b
iframe与父页面通信全解：实现值传递与方法互调的多种方案
最新发布
weixin_42608318的博客
10-22 1107
要在iframe中成功调用父页面函数，首先必须确保这些函数在父级作用域中是可访问的。由于iframe运行在一个独立的 JavaScript 执行环境中，它无法直接访问父页面的局部变量或闭包内的函数，因此必须将目标函数挂载到全局对象window上。例如，父页面可以定义如下函数：console.log('父页面状态更新:', status);上述代码将两个函数和closeModal显式挂载至window全局对象，使其可在iframe内通过或被调用。
js控制Iframe 和 iframe与主页的交互，传值 (转载)
weixin_30840253的博客
06-01 359
HTML框架IFrame下利用JS在主页面和子页面间传值 今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料下面主页面和子页面互相传值的DEMO如果仅仅需要子页面触发主页面的函数仅需[parent.window.你的函数]就可以了DOM方法：父窗口操作IFRAME：window.frames["iframeSon"].documentIFRAME操作父窗口:wi...
关于Iframe父页面与子页面之间的相互调用
09-01
当涉及到Iframe时，有时我们需要在父页面与子页面之间进行交互，如调用各自的方法或访问数据。本文将详细探讨如何实现Iframe父页面与子页面之间的相互调用。 首先，理解window对象是关键。在浏览器中，每一个HTML...
iframe的父子窗口之间的对象相互调用基本用法
09-05
当使用`iframe`时，可能会遇到需要在父子窗口之间进行通信的情况，例如传递数据或调用彼此的方法。下面我们将详细讨论`iframe`的父子窗口之间对象相互调用的基本用法。 1. **子窗口调用父窗口的JS方法**： 子窗口...
Javscript调用iframe框架页面中函数的方法
09-04
JavaScript调用iframe框架页面中的函数是一种常见的Web开发技术，它允许不同页面间的通信，尤其是在页面嵌套时。这里我们将深入探讨如何实现这一功能，并提供一些实际的代码示例。 首先，要理解JavaScript如何访问...
jQuery实现iframe父窗体和子窗体的相互调用
10-22
在Web开发过程中，我们经常需要在父页面和iframe...总之，通过本文，读者应该能够掌握使用jQuery实现iframe父窗体和子窗体相互调用的方法，并了解在此过程中需要注意的要点。这将有助于提高Web应用的用户体验和交互性。
javascript与Iframe之间通信
wen_j的博客
03-27 1865
一、同域（同一域名，同一端口，同一协议）下进行 1.iframe子页面和父页面相互获取元素 1.1子页面获取父页面元素 JS原生：window.parent.document.getElementById(‘元素id’) Jquery：$("#id",parent.document) 1.2父页面获取子页面元素 JS原生：window.frames[iframe序号].document.getEl...
JS中Iframe之间传值的方法
10-27
在js中，我们时常用到用iframe做系统框架，在子页面也，父页面之间的值传递是一个问题，下面是js获取父窗体和子窗体的对象js：
《js》iframe之间跨域交互
kaige8312的博客
07-22 1621
1.父页面调用子页面 直接通过iframe的url?param=abc 方式,把值传到子页面. https://www.cnblogs.com/sydeveloper/p/3712863.html 2.子页面调用父页面 通过parent https://blog.youkuaiyun.com/u012374381/article/details/79578311 3. window.po...
iframe 布局跨页面交互操作js
fuchto的博客
03-29 448
获取 指定 iframe 框架 iframeTop 是iframe 框架命名 that = window.parent.iframeTop; 使用 that.$() 进行jq操作 that.$("#user").append($(this).text());
【JavaScript】------ JavaScript 实现传递消息数据到iframe页面并互相传递
热门推荐
皮皮冰要做大神
08-09 1万+
如果是使用iframe，代码应该这样写： 阿里云米店：https://mi.aliyun.com/shop/36078 <div style="height: 200px; width:300px;"><iframe src="http://localhost:8080/chenzhenhua/lister.html" id="myIFrame">&...
iframe 跨域 js交互
fyqcdbdx的专栏
11-18 1004
主要利用document.domain， 在有iframe的页面head写上：    document.domain='xxx.com' 在iframe目标页面也写上：    document.domain='xxx.com' 这样，两个页面的js就可以交互了，但要注意一个问题，在IE678下，有时获取location.href时有异常，保险起见使用loc
js 关于iframe页面之间通信, 传递消息
godev的博客
08-26 3981
通过使用postMessage和onmessage这两个HTML5的方法, 实现iframe跨页面通信功能
javascript关于Iframe父窗口和子窗口交互
陌阡博客
04-19 2641
//兼容IE、Firefox的iframe DOM获取函数 function getIFrameDOM(id){ return document.getElementById(id).contentDocument || document.frames[id].document; } parent.html 此处可通过iframeB的JavaScript函数，来替换
当iframe嵌入子网页时，如何使用js交互。比如父窗口iframe自适应子网页高度
sd2131512的专栏
04-13 397
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage父窗口iframe自适应子网页高度。如果普通调用js获取子窗口高度，会暴权限问题，请参考上文子窗口加入js代码window.addEventListener("message", receiveMessage, false); function receiveMe...
主子应用js方法相互调用
09-10
主子应用之间通过 JavaScript 方法相互调用的实现方法，会因同域和跨域场景的不同而有所差异： ### 同域通信 同域下，主应用和子应用可以通过直接访问彼此的 `window` 对象来进行通信。主应用可以通过 `iframe.contentWindow` 访问子应用的 `window` 对象，而子应用可以通过 `window.parent` 访问主应用的 `window` 对象。以下是一个示例代码： #### 主应用 HTML 文件（`main.html`） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Main App</title> </head> <body> <iframe id="myIframe" src="sub.html" frameborder="0"></iframe> <button onclick="callSubAppMethod()">Call Sub App Method</button> <script> function mainAppMethod() { alert('This is a method in the main app.'); } function callSubAppMethod() { const iframe = document.getElementById('myIframe'); iframe.contentWindow.subAppMethod(); } </script> </body> </html> ``` #### 子应用 HTML 文件（`sub.html`） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sub App</title> </head> <body> <button onclick="callMainAppMethod()">Call Main App Method</button> <script> function subAppMethod() { alert('This is a method in the sub app.'); } function callMainAppMethod() { window.parent.mainAppMethod(); } </script> </body> </html> ``` ### 跨域通信 跨域时，由于浏览器的同源策略，不能直接访问彼此的 `window` 对象，可使用 `postMessage` 方法，它是 HTML5 中引入的一种跨文档消息传递技术，允许在不同源之间传递数据。以下是一个示例代码： #### 主应用 HTML 文件（`main.html`） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Main App</title> </head> <body> <iframe id="myIframe" src="http://subapp.com/sub.html" frameborder="0"></iframe> <button onclick="sendMessageToSubApp()">Send Message to Sub App</button> <script> function mainAppMethod() { alert('This is a method in the main app.'); } function sendMessageToSubApp() { const iframe = document.getElementById('myIframe'); iframe.contentWindow.postMessage('callSubAppMethod', 'http://subapp.com'); } window.addEventListener('message', (event) => { if (event.origin === 'http://subapp.com') { if (event.data === 'callMainAppMethod') { mainAppMethod(); } } }); </script> </body> </html> ``` #### 子应用 HTML 文件（`sub.html`） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sub App</title> </head> <body> <button onclick="sendMessageToMainApp()">Send Message to Main App</button> <script> function subAppMethod() { alert('This is a method in the sub app.'); } function sendMessageToMainApp() { window.parent.postMessage('callMainAppMethod', 'http://mainapp.com'); } window.addEventListener('message', (event) => { if (event.origin === 'http://mainapp.com') { if (event.data === 'callSubAppMethod') { subAppMethod(); } } }); </script> </body> </html> ``` ### 使用微前端框架实现通信 在微前端架构中，如 qiankun 框架，也提供了主子应用通信的方式。qiankun 可以通过 `initGlobalState`、`setGlobalState`、`onGlobalStateChange` 等方法来实现主子应用之间的状态管理和通信。注意，`initGlobalState`、`setGlobalState`、`onGlobalStateChange` 只能在主应用中注册，`setGlobalState`、`onGlobalStateChange` 在子应用中通过 `props` 传值在子应用入口 `js` 文件导出的 `mount` 生命周期中接收调用 [^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值