关于两个iframe之间调用对象的问题

最新推荐文章于 2020-10-15 13:57:44 发布
原创 最新推荐文章于 2020-10-15 13:57:44 发布 · 143 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #ViewUI

本文探讨了在两个iframe之间进行对象调用的挑战及解决方案，重点关注避免对象引用导致的内存泄露问题，并对比了使用eval方法的利弊。提出了一种性能优化策略，旨在实现高效且安全的iframe间通信。
最近遇到一个问题，需要在两个iframe之间相互调用，最原始的做法是获取iframe对象.currentWindow.对象的方式来调用，但是这样怕纯在对象引用导致iframe内存销毁的问题。而且没办法封装成一个通用的方法（因为用户调用的实现不一致）。
看到operamasks上面有iframe组件，研究了一下他的iframe之间调用对象的方式，发现是通过eval方法来实现，即先获取调用对象所在的iframe对象，然后通过iframe对象.eval（“需要执行的调用语句”），但是考虑到eval会存在性能问题，所以又犹豫了。希望大家给点意见！说说自己的想法！
qdch520
关注
iframe的使用和 contentWindow、parent以及postMessage通信方式
weixin_50367873的博客
12-03 3200
问题： 如何进行消息通信（父发给子，子接收父的消息，也可父直接调用子的方法； 子发给父，父接收子的消息；） 如何找到指定的子或者父window（如果iframe层级过多），又如何在发送消息时不影响其他的message监听 一、iframe的使用 <iframe style={{border:0,width:"100%",height:630,}} src={src} /> 如何进行消息通信（父发给子，子接收父的消息； 子发给父，父接收子的消息） 方法一： 直接通过获取父或者子的
iframe不起作用原因
dkgee
02-19 2481
Refused to display 'https://gitlab.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'". 检查发现是网站响应头内容安全策略限制（Content-Security-Poli...
关于iframe的一些操作记录
if_you_can_please_do的博客
04-25 382
本文作为自己对iframe的一个操作总结，做下简单的记录，希望能给大家带来收获，页面使用了jquery（当然iframe要有访问的权限才行，即同源）。假如index页面包含一个id为 iframe的 iframe,下文中所提及的iframe变量均为dom对象,jQuery对象转dom对象可以使用[0]的方式。index获取该iframe的方式为 $(“#iframe”); main ifra
iframe.contentWindow
山水子农
09-15 5460
1、iframe.contentWindow(主页面调用iframe)  此处的iframe是从document取得的，即作作为document的子对象出现，虽然是文档(document)对象，但由于它是独立的页面，因而拥有自己的事件，拥有自己的窗口对象(contentWindow)；contentWindow属性是指指定的frame或者iframe所在的window对象。 在IE中iframe
javascript window获取iframe、iframe获取window、document
wzp6010625的博客
05-25 7143
前言 日常开发中，经常用到在window中获取某个iframe，或者在iframe中获取当前window。这里做个总结，记在心里后，就不用每次都百度了。 iframe和iframe的关系 首先需要说明的是，w3c已经不推荐使用frame，而推荐使用iframe，iframe也就是inline frame（行内frame），顾名思义它具有css的行内框特性，正是因为这一特性才引出来iframe...
关于iframe点击事件无效的解决办法
android_xiaobai1的博客
07-02 1万+
在一次项目的需求下，我偶然发现一个问题，为什么我给iframe添加点击事件无效。 经过度娘的一番解释发现，iframe是没有点击事件的，神奇! var iframe1 = document.querySelector('#iframeID') iframe1.addEventListener('click', function() { a...
解决同一页面中两个iframe互相调用jquery,js函数的方法
10-20
以上就是解决同一页面中两个iframe互相调用jquery,js函数的方法的详细解释。希望这篇文章能够帮助大家在进行Web开发时，更好地处理iframe之间的交互问题。同时，请多支持相关的技术分享，为更多的开发者提供帮助。
iframe的父子窗口之间的对象相互调用基本用法
12-09
使用iframe的时候，可能会涉及到父子窗口之间传值和方法的相互调用，之前一直有些迷糊，也没有着意去弄清楚，这两天要干活，没法子了只好把这都弄明白了。其实非常简单，就那么几个用法，几句代码而已。 子窗口中...
关于Iframe父页面与子页面之间的相互调用
09-01
在Demo2中，父页面iframe1.html有两个Iframe（iframe2和iframe3）。父页面可以通过`getElementById`获取特定Iframe的引用，然后在其`onload`事件中调用子页面的方法，如`iframe2.contentWindow.b();`。同时，子页面...
js实现iframe跨页面调用函数的方法
12-11
当一个页面（父页面）嵌入了另一个页面（子页面）作为iframe时，有时需要在两个页面之间通信，调用各自的功能。下面我们将详细介绍如何实现这一功能。 1. 父页面调用子页面的函数： 在`parent.html`（父页面）中，...
layui 获取iframe层的window
weixin_30847939的博客
01-24 1383
success: function (layero, index) { var iframeWin = $("div.layui-layer-content > iframe", layero)[0].contentWindow; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method(); $('#pr...
子页面修改当前所在iframe
卑微的码农
10-15 525
function currentIframeHeight() { var currentIFrame=window.frameElement; currentIFrame.style='height:'+(parent.$('iframe').eq(0).height()+40)+'px'; } currentIframeHeight();
获取iframe中window对象的方法
热门推荐
coding
06-13 1万+
很简单的一行代码 document.getElementsByTagName('iframe')[0].contentWindow 上面这行代码获取到的就是iframe中的window对象. 如果运用JQuery的话,需要记得$这个关键字在有iframe的页面中有两个. 一个是全局变量window.$ 还有一个是iframe中的$,获取iframe中的$可以通过
2014-10-28——iframe多层嵌套时获取元素总结
weixin_30752377的博客
10-28 609
同域:父页面获取子页面元素：注意：onload事件jQuery获取：$("iframe").contents().find("holder")......;（嵌套三层，或者更多时）$('iframe').contents().find('iframe').contents().find("iframe")......js获取：window.frames["holder"].contentWindo...
通过iframe引入另外一个项目中的html片段到项目中，解决样式，高度，兼容等问题的策略...
weixin_34029680的博客
06-26 547
 <!--尾部开始--><iframe src="http://172.16.24.11:9000/cartoon-web/footer_new" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"width='100%' height='39...
在iframe中获取iframe外的对象
weixin_30435261的博客
12-07 551
parent.document.getElementById("dom ID"); $($(parent.document.getElementById("video-iframe")).parent().parent()).children('div.vid-tags').text(desc); parent，top还能调用父级窗口的的js方法，比如，getIFrameDOM(iID）是...
两个iframe之间的通信
最新发布
01-17
### 实现HTML iframe元素间的JavaScript通信 为了实现两个`iframe`之间的通信，可以采用多种方法。一种常见的方式是利用`postMessage()` API来安全地传递消息给另一个源中的窗口或框架。 #### 使用 `postMessage` 当父页面想要向嵌入的`iframe`发送信息时，可以通过调用该`iframe`对象上的`contentWindow.postMessage()`函数[^3]： ```javascript // 假设这是父页面内的脚本部分 var iframe = document.querySelector('iframe'); iframe.contentWindow.postMessage('来自父级的消息', '*'); // '*'表示允许任何目标原点接收此消息 ``` 相应地，在子页面（即被加载到`iframe`里的网页）中监听这些传入的信息并作出反应: ```javascript window.addEventListener('message', function(event){ // 验证消息来源的安全性非常重要 if (event.origin !== '预期发件人的网址') { return; } console.log('接收到的消息:', event.data); }, false); ``` 同样地，如果希望从一个`iframe`向其兄弟节点或其他同级别的`iframe`发送消息，则需要先通过DOM找到对应的`iframe`元素再执行上述过程；或者让中间的父文档充当中介者来进行转发。 对于跨域情况下的父子关系之外的其他类型的窗体间通讯，也可以借助于服务器端的支持或者其他间接手段比如共享存储机制等完成交互操作。 另外值得注意的是，现代浏览器还提供了更高级别的API如Broadcast Channel API用于简单的广播型消息发布订阅模式[^5]，不过这通常适用于同一域名下多个标签页或worker之间而非严格意义上的`iframe`间直接对话场景。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值