开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

从iframe发出的消息上的window.addEventListener

是用于在父页面中监听来自iframe的消息的方法。

概念： window.addEventListener是JavaScript中的一个方法，用于向指定的元素添加事件监听器。它可以用于监听各种事件，包括来自iframe的消息。

分类： window.addEventListener属于DOM事件相关的方法。

优势：使用window.addEventListener可以实现父页面与嵌入的iframe之间的通信。通过监听来自iframe的消息，可以实现跨域通信、数据传递等功能。

应用场景：

跨域通信：当父页面与嵌入的iframe处于不同的域名下时，可以使用window.addEventListener监听来自iframe的消息，实现跨域通信。
数据传递：父页面可以通过监听iframe发送的消息，获取到iframe中的数据，实现数据传递和共享。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云提供了一系列云计算相关的产品，包括云服务器、云存储、云数据库等。以下是一些相关产品的介绍链接：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
腾讯云云数据库MongoDB版（TencentDB for MongoDB）：https://cloud.tencent.com/product/cdb_mongodb

请注意，以上链接仅为示例，实际使用时应根据具体需求选择适合的产品和服务。

总结： window.addEventListener是用于在父页面中监听来自iframe的消息的方法，可以实现跨域通信和数据传递等功能。腾讯云提供了一系列云计算相关的产品，包括云服务器、云存储、云数据库等，可以根据具体需求选择适合的产品和服务。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5的Message

Message API最大的优势是跨域发送消息。.../en/DOM/window.postMessage Message中一般常用的属性： 1、data 包含传入的消息，一般以会将传递的数据转化为字符串； 2、origin 返回消息来自的域，可以根据它来判断是否要处理消息...，是非常基本的层级上的策略控制 3、source 相当于window.opener，这样就可以实现基本的消息互通了这里有两个页面：index.html、postMessageTarget.html...点击“postMessage”向iframe发出消息，iframe获取消息进行处理并回调父层文档对象的一个方法，详见代码。 index.html <!...： postMessage的目标源文档必须填写（即第二个参数，第一个参数则提交的数据），它必须与iframe对象的所在的域匹配，如果不匹配将会抛出一个安全性错误，阻止脚本继续执行。

2.1K1 0

消息传输的设计方式（上）

预备知识郭斯杰最早开始接触的是BookKeeper，从后面的文章介绍中我们可以知道，BookKeeper是很多组件的基础，可以帮助进行分布式环境的信息协同管理，正是由于拥有BookKeeper的实际工作经验...Pulsar对于消息的相关概念和角色定义与Kafka很相近，它们都把数据的接入方叫做生产者，都把数据的接收方叫做消费者（订阅者），如下图所示。 Pulsar是如何实现对于多租户用例的支持的？...命名空间是Pulsar集群的最基本管理单元，在命名空间级别，你可以设置权限、调优复制策略、管理跨集群的消息数据复制、控制消息过期，以及其他关键操作。同一个命名空间里的主题共享相同的配置。...预备知识郭斯杰最早开始接触的是BookKeeper，从后面的文章介绍中我们可以知道，BookKeeper是很多组件的基础，可以帮助进行分布式环境的信息协同管理，正是由于拥有BookKeeper的实际工作经验...命名空间是Pulsar集群的最基本管理单元，在命名空间级别，你可以设置权限、调优复制策略、管理跨集群的消息数据复制、控制消息过期，以及其他关键操作。同一个命名空间里的主题共享相同的配置。

9228 0

iframe怎么将参数传递给vue 父组件

在接收到从iframe发送的参数后执行某些特定的逻辑，可以在handleMessage方法中添加相应的判断语句。使用条件语句（如if语句）来检查接收到的参数，并根据不同的条件执行不同的操作。...iframe接收vue界面传的值在iframe中，使用window.addEventListener监听message事件，然后在事件处理程序中获取传递的数据： // 监听来自父页面的消息 window.addEventListener('message', function(event) { const...postMessage方法接收两个参数：要发送的数据和目标窗口的origin（使用通配符'*'表示可以从任何来源接收消息）。...iframe中使用window.addEventListener监听message事件，并在事件处理程序中获取传递的数据这里需要注意一下，使用'*'作为目标窗口的origin存在安全风险。

1.3K2 0

前端和前端联调的各种姿势，了解一下

注意的是，addEventListener接收消息的时候，必须首先使用事件对象的origin和source属性来校验消息的发送者的身份，如果这里有差错，可能会导致跨站点脚本攻击。...html5支持一个onstorage事件，我们在window对象上添加监听就可以监听到变化： window.addEventListener('storage', (e) => console.log(...MessageChannel的实例有两个属性，portl1和port2。给port1发送消息，那么port2就会收到。...可以被多个页面同时使用，可以从几个浏览上下文中访问，例如几个窗口、iframe、worker。...，除了发消息的那个端口 everyPorts.forEach(singlePort => { if (port !

1.5K1 0

跨域通信

ip上。...针对iframe 如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。...在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。...event.source：发送消息的窗口 event.origin: 消息发向的网址 event.data: 消息内容代码如下： window.addEventListener('message',...下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

1.3K4 0

【通信】跨文档通信含代码说明

本章介绍的跨文本通信，正是为了解决这些案例而设计的。跨文档通信，可以在不同网页文档，不同端口（跨域情况下）进行消息传递。...：' + evt.data; }; if (window.addEventListener) { window.addEventListener("message", messageHandle...说明 - iframe1中： window.parent.frames[1].postMessage(message, “*”) 这行代码效果是给iframe2发送一个消息即 iframe 中的 form...transfer：可选参数 - iframe2中： window.addEventListener和window.attachEvent实现对iframe1发送消息事件的监听。...上一节的demo中将targetOrigin设置成了通配符*这个在实际使用场合需要避免，因为这是不安全的做法，实际情况下，在处理跨源通信的消息时，一定要验证每个消息的源。

8162 0

解决 DOM XSS 难题

postMessage这是一个 Chrome 扩展程序，当它检测到呼叫并枚举从源到接收器的路径时，它会帮助您提醒您。然而，虽然postMessage电话比比皆是，但大多数往往是误报，需要手动验证。.../iframe_chat.html 的一个特别有趣的呼叫： window.addEventListener("message", function(e) { ... } else if (e.data.type...它没有执行任何来源检查——对于漏洞猎手来说总是一个好兆头，因为消息可以从任何攻击者控制的域发送。是window.settingsSync用来做什么的？...如果消息数据类型是IframeLoaded，它会发送一个带有credentialConfig数据的 PostMessage。...上的 XSS，XSS 将运行从https://abc.cloudfront.net/iframe_chat.html发送另一个 PostMessage 的任意 JavaScript到https://feedback.companyA.com

1.9K5 0

浏览器同源政策及其规避方法

三、iframe 如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。...window.parent.document.body // 报错如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的document.domain属性，就可以规避同源政策，拿到DOM。...event.source：发送消息的窗口 event.origin: 消息发向的网址 event.data: 消息内容下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。...首先，网页动态插入元素，由它向跨源网址发出请求。...下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

94211 0

HTML 面试要点：跨标签页通信

# Shared Worker SharedWorker (opens new window) 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker...收到消息后，进行转发，传递给其他与 iframe 同域的 iframe： const bc = new BroadcastChannel('cellinlab-iframe-channel'); /..., '*'); }; 位于其他跨域页面中的 iframe 接收来自同域 iframe 的消息后，再同步给其所在的页面： // 监听来自 iframe 的信息 window.addEventListener...:', msg); } }); # 服务端推送服务端推送是利用服务端作为中转站，去实现消息的互通，宏观上看，类似于 QQ、微信的消息通信机制。...从技术实现上讲，常见的方法有： # 简单轮询顾名思义，就是在前端创建定时器，定期查询服务端是否有新的消息。

1.3K1 0

postMessage详解

width="300" height="360"> 你的浏览器不支持 iframe。...== "https://www.runoob.com") { // 验证消息来源地址 return; } console.log("从"+ e.origin +"收到消息...： " + e.data); }); e.source：消息源，消息的发送窗口/iframe e.origin：消息源的URL（可能包含协议、域名或IP、端口），用来验证数据 e.data...：发送过来的数据示例2：iframe父子页面通信接收消息的一方需要监听message事件。...window.addEventListener(“message”, ()=> { }); 父页面向子页面传递信息。

8572 0

浏览器同源政策及其规避方法

三、iframe 如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。...window.parent.document.body // 报错如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的document.domain属性，就可以规避同源政策，拿到DOM。...event.source：发送消息的窗口 event.origin: 消息发向的网址 event.data: 消息内容下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。...首先，网页动态插入元素，由它向跨源网址发出请求。...下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

8466 0

浏览器同源策略跨域问题的产生与解决

三、iframe 如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。...window.parent.document.body // 报错如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的document.domain属性，就可以规避同源政策，拿到DOM。...event.source：发送消息的窗口 event.origin: 消息发向的网址 event.data: 消息内容下面的例子是，子窗口通过event.source属性引用父窗口，然后发送消息。...首先，网页动态插入元素，由它向跨源网址发出请求。...下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

1.1K3 0

跨浏览器tab页的通信解决方案尝试

单方向的通信原理如上图所示，tab A中嵌入iframe A，tab B中嵌入iframe B，这两个iframe引用相同的页面“bridge.html”。...如果tab A发消息给tab B，首先tab A通过postMessage消息发送给iframe A（tab A可以获取到iframe A的window对象iframe.contentWindow）...；此后iframe A通过storage消息完成与iframe B的通信（由于iframeA 与iframe B同源，因此case 2的通信方式这里可以使用）；最终，iframe B同样采用postMessage...方式发送消息给tab B（在iframe中通过window.parent引用tab B的window对象）。...#J_bridge').contentWindow.postMessage(JSON.stringify(data),'/'); }; // 接收来自 [#J_bridge]iframe的tab消息

2.2K4 0

不同页面通信与跨域

html5出现了一个事件： onstorage，我们在window对象上添加监听就可以监听到变化： window.addEventListener('storage', (e) => console.log...('message',function(e){ // 接受到父文档的消息后，广播给其他的同源页面 localStorage.setItem('info',e.data); }); <...加上websocket的话，还可以非同源聊天呢，其他的可以自己随意设置了。从1到2的信息实时传递更新就这样子成功了，反之亦然。 4.MessageChannel 顾名思义，信息通道。...允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据m，而且在 Web Worker 中可用。可以控制台打印，发现有两个属性，portl1和port2。...我们叫他结构化克隆，能处理对象循环依赖和大部分的内置对象。比如postMessage发消息给子窗口或者WebWorker的时候就会经常用到，拿到数据进行处理，但不污染原数据。

1.8K1 0

JSON-RPC & postMessage 谈谈浏览器消息通信的封装技巧

最近的工作需要经常与 iframe 与 Web Workers 打交道，处理页面与内嵌页、主线程与 worker 通信，撸了个用于处理浏览器消息通信的处理的工具库 rpc-shooter，涵盖了浏览器主要的消息通信的接口支持...聪明的你一定想到了基于统一消息格式配合对应的消息处理策略来维护消息事件的方法调用，很简单的机制，却很好用： const childWindow = document.querySelector('iframe...，消息通信的处理维护一份策略处理函数即可，接下来的工作也是建立在此基础上的，加一点“细节”即可。...相对与本地事件调用，消息通信则本质是监听远程服务所发出的事件，与 socket.io 类似： // client socket.emit('join-in', input.value); // server...至此我们完成从基本消息通信到页面 RPC 服务调用的封装，对实现细节有兴趣的同学可以戳：rpc-shooter 欢迎指教。

1821 0

postMessage使用

发送方，调用 postMessage 方法，发送 message ，接收方，在 window 下监听 message 方法，接受传来的数据。发送消息2 <iframe...iframe。...1 iframe let receiver = document.getElementById("receiver").contentWindow; // 得到就是 iframe...console.log("e", e); messageEle.innerHTML = "从"

5422 0

玩转iframe3. 非同域的两个tab页面通信4.MessageChannel

html5出现了一个事件： onstorage，我们在window对象上添加监听就可以监听到变化： window.addEventListener('storage', (e) => console.log...('message',function(e){ // 接受到父文档的消息后，广播给其他的同源页面 localStorage.setItem('info',e.data); }); <...加上websocket的话，还可以非同源聊天呢，其他的可以自己随意设置了。 ? 从1到2的信息实时传递更新就这样子成功了，反之亦然。 4.MessageChannel 顾名思义，信息通道。...允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据m，而且在 Web Worker 中可用。可以控制台打印，发现有两个属性，portl1和port2。...我们叫他结构化克隆，能处理对象循环依赖和大部分的内置对象。比如postMessage发消息给子窗口或者WebWorker的时候就会经常用到，拿到数据进行处理，但不污染原数据。

4.4K2 0

如何使用 JavaScript 检测用户是否启用三方 Cookie ？

但是我们可以使用 Message Event 来进行父子应用之间的通信，通过这个我们可以基于 URL 向其他浏览器发送消息，在我们现在这种情况下，我们可以从 iFrame 向可能在不同域上的父应用发送消息...然后，我们通过 parent.postMessage() 方法向父应用发送一条消息；在 iFrame 中，parent 是一个隐含的对象。 <!...然后，iFrame 内部的函数检查iFrame 的 Cookie 状态并发送一个消息，该消息被我们的 messagehandler 拦截。...检查消息是否由 iFrame 发送，事件现在将保存来自 iFrame 内的 checkCookieEnable 函数结果的响应。...，响应从 iframe 窗口传来的消息 window.addEventListener('message', messageHandler); // 创建并添加一个隐藏的 iframe

4311 0

史上最全跨域总结

他的神器之处在于name值在不同页面或者不同域下加载后依旧存在，没有修改就不会发生变化，并且可以存储非常长的name(2MB) 假设index页面请求远端服务器上的数据，我们在该页面下创建iframe标签...的子窗口是不能通信的，因为同源策略，所以改变子窗口的路径就可以了，将数据当做改变后的路径的hash值加载路径上，然后就可以通信了。...window发送消息，是window.frames属性的成员或者是window.open方法创建的窗口。...Message是要发送的消息，类型为String，Object(IE8、9不支持Obj)，targetOrigin是限定消息接受范围，不限制就用星号 * 接受信息的message事件 var onmessage...简单的说，咱们可以通过 Nginx 转发请求，把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址上。具体 Nginx 的配置说明，可以参看后续我整理的 Nginx 教程说明。

1.8K4 0

vue父页面给iframe子页面传值

在vue父页面有两个个参数名称和图标，需要把这两个参数传到iframe的地图里面，在地图触发绘点事件的时候，获取到传来的参数并且展示 vue:传值给子页面iframe // 传值给子页面iframe...接收父页面的值在iframe中，使用window.addEventListener监听message事件，然后在事件处理程序中获取传递的数据： // 监听来自vue父页面的消息 window.addEventListener('message', function(event) { const...data = event.data; // 在这里处理接收到的消息 console.log('Received message from parent:', data); }); 当父页面中的按钮被点击时，会将值传递给子页面的iframe元素。

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭