文章/答案/技术大牛

发布

来自专栏HTML5学堂
postMessage与postMessage跨域
HTML5学堂今日postMessage跨域教学流程先为大家讲解postMessage的基本知识之后，我们书写一个实例：使用静态的iframe，实现A域前端页面与B域前端页面之间的数据传递最后，我们使用在postMessage的这种跨域方式当中，提供了一个postMessage方法和一个message事件。 postMessage方法用于发送消息。 2 postMessage方法基本语法 postMessage(message, targetOrigin)方法接受两个参数 2.1 message：要传递的数据。流程图用这张来辅助一下对postMessage流程的理解吧~ ? 7 小结 7.1 postMessage的消息发送方式，包括postMessage方法以及message事件； 7.2 postMessage方法中拥有两个参数，分别用于传递数据以及限制数据来源； 7.3
3.5K60发布于 2018-03-13
来自专栏全栈程序员必看
postMessage详解
发送消息</button>
<iframe loading="lazy" id="iframe" src="https://c.runoob.com/runoobtest/<em>postMessage</em>_receiver.html e.preventDefault(); var val = document.getElementById('text').value; receiver.<em>postMessage</em> let ifr = document.getElementById("iframe") ifr.contentWindow.postMessage('父页面向子页面发送消息', "*") // or ifr.contentWindow.postMessage('父页面向子页面发送消息', "http://10.192.195.166:56225/son.html") 子页面向父页面传递数据 window.parent.postMessage('子页面向父页面发送消息','*') 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159842.html原文链接
1.2K20编辑于 2022-09-13

来自专栏网络日志

窗口间通信方案——postMessage

postMessage 是 html5 引入的 API，postMessage 方法允许来自不同源的脚本采用异步方式进行通信，其实同源不同页面的脚本也可以采用 postMessage 方法进行通信。 targetWindow.postMessage(message, targetOrigin, [transfer]) targetWindow：目标窗口的全局对象引用，比如 iframe 的 contentWindow

57910编辑于 2024-05-31

来自专栏前端小叙

postMessage使用

参考自文档：https://www.runoob.com/js/met-win-postmessage.html postMessage 方法用于安全地实现跨域通信。发送方，调用 postMessage 方法，发送 message ，接收方，在 window 下监听 message 方法，接受传来的数据。 <!

</iframe> <script> // message 发送：postmessage方法调用者：谁需要数据，谁调用 :33 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://c.runoob.com DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>window.postMessage()

75420编辑于 2022-06-30

来自专栏青青天空树

postMessage 消息传递

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可实现跨文本档、多窗口、跨域消息传递。参数 postMessage( data , origin , [transfer] ),接受两个参数 1.data：需要传递的数据，html5规范中该参数可以是JavaScript 发送消息 otherWindow.postMessage( data , origin , [transfer] ) otherWindow为其他窗口的一个引用，比如iframe window.addEventListener('message' , function( event ){ } , false ); event为一个对象，它的属性有： data ：数据字段 origin ：调用postMessage

1.2K30发布于 2018-09-06

来自专栏全栈程序员必看

postMessage的使用

postMessage是H5的API，用来解决跨页面通信的。postMessage的使用分为发送方和接收方。发送方的代码用法如下： otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow是接收方的window对象。案例以后在进行补充… 更多详情请看MDN，链接地址： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage 发布者：

1.3K20编辑于 2022-09-14

来自专栏code秘密花园

postMessage 还能这样玩

因为 Postmate 通信的基础是基于 postMessage，所以在介绍如何握手之前，我们先来简单了解一下 postMessage API。 2.1 postMessage 简介对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议、端口号以及主机时，这两个脚本才能相互通信。 window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 2.1.1 postMessage() 语法 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow：其他窗口的一个引用在子页面接收到 handshake 握手消息之后，同样也会使用 postMessage API 往父页面回复 handshake-reply 消息。

2.3K31发布于 2020-11-26

来自专栏杰的记事本

postMessage实现跨域通信

跨文档通信就是我们国内更为熟知的HTML5 window.postMessage()应用的那种通信；通道通信也被称为”MessageChannel”. 然后使用postMessage方法发送数据。 postMessage方法支持两个参数，具体参考下表： message发送的数据targetOrigin发送数据的来源。 postMessage方法中的message参数不仅仅可以是字符串，结构对象、数据对象(如：File和ArrayBuffer)或是数组都是可以的。也就是要使用：window.postMessage(‘发送信息。’,’http://example.zhangxinxu.com’);而不是：window.postMessage(‘发送信息。’ [0]; // 端口发送数据 port.postMessage(message); 然后是第二个iframe页面（demo右侧那个，用来显示信息）。

2K20发布于 2019-09-04

来自专栏Node.js开发

iframe 与 postMessage 方法

iframe 与 postMessage 方法 postMessage 用于跨文档通信，如父页面向内嵌的 iframe 发消息。既是发消息，就有发送方与接收方，发送方要调用 postMessage 方法，接收方要注册 onmessage 事件处理函数，处理接收的消息。 ('ifrm').contentWindow; // postMessage 参数: 1.要发送的数据, 2.目标域名 wn.postMessage('Hello to iframe from parent ('Message received', event.origin); } } 子页面向父页面发送消息同理： // 在 iframe 中发送消息 window.parent.postMessage Iframes and the postMessage Method 2. Window.postMessage() MDN

1.3K10编辑于 2023-06-20

来自专栏Windows开发

PostMessage严谨用法要这样做

PostMessage还有两点要注意，否则容易引发低概率问题，很难排查。第一， PostMessage调用会失败，比如消息队列限制是2000（系统注册表配置），队列如果已满是无法再次发送消息。第二， PostMessage调用完的下一行代码与消息处理的代码，它们的执行顺序，由于多线程切换无法预期，所以谁先谁后都有可能。这段代码存在两个问题：第一， PostMessage没有判断失败，如果失败WM_MOVE_WINDOW消息将不会被处理，pRect对象将不会释放，内存泄漏。第二， PostMessage调用下一行代码打印日志使用pRect对象，此时WM_MOVE_WINDOW消息可能已经处理完，pRect对象已被释放成野指针。严谨的实现 ?

3K40发布于 2019-08-29

来自专栏Keller

通过postMessage进行跨域通信

这里首先想到就是把h5页面用iframe内嵌到pc网页中，然后pc通过postMessage方法，把变化的数据发送给iframe，iframe内嵌的h5通过addEventListener接收数据，再对数据做响应式的变化这里总结一下postMessage的使用，api很简单： otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow是目标窗口的引用 iframe的dom引用，而是iframe window的引用 const iframe = document.getElementById('myIFrame').contentWindow; iframe.postMessage this.actions[type] = cb; return this; } emit = (type, value) => { this.win.postMessage

1K40编辑于 2021-12-14

来自专栏前端萌媛的成长之路

iframe+postMessage实现跨域通信

然后返回管理系统，显示图片实现思路：上传图片时，需要在本窗口跳转到图片管理系统，并且两个系统之间要通信考虑到两个系统是不同的端口号，存在跨域问题，这时发现HTML5新增了一个API-window.postMessage ()，于是就决定用iframe结合window.postMessage()实现在页面中嵌入一个iframe，将图片管理系统嵌入到当前的管理系统中，结合window.postMessage()实现跨域通信 ()-MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage 1、A页面使用到的语法 window.postMessage () otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow：其他窗口的一个引用（在这里我使用了iframe 或者未来origin，因为postMessage被调用后，可能会被导航到不同的位置，所以需要做个异常情况判断处理origin !

6K40发布于 2018-05-25

来自专栏前端侠2.0

html5 Postmessage解决跨域问题

在 Cross-document messaging 中使用 postMessage 和 onmessage 为了实现不同域之间的通信，需要在操作系统的 hosts 文件添加两个域名，进行模拟。文件中添加两个不同的域名 127.0.0.1 parent.com 127.0.0.1 child.com 在父网页中通过 iframe 嵌入子页面，并在 JavaScript 代码中调用 postMessage 父页面中嵌入子页面，调用 postMessage 方法发送数据 <html> <head> <meta http-equiv="Content-Type" content="text/html communication using HTML5</title> <script type="text/JavaScript"> function sendIt(){ // 通过 postMessage

1.3K20发布于 2018-09-21

来自专栏云计算linux

H5 postMessage跨文档消息传递

click(function(){ var message=$("input[type='text']").val(); window.parent.frames[1].postMessage

22210编辑于 2024-12-17

来自专栏陶士涵的菜地

解决postMessage跨域、跨iframe消息传递

页面中有子iframe页面 , 当子iframe接收到消息 , 比如websocket传递过来的消息时希望能通知到父级页面可以使用windows.postMessage传递消息 , 两个参数 ,第一个是数据 ,第二个是跨域时指定的目的域向父级页面传递消息 , 跨域部分是 * , 表示所有域名 window.parent.postMessage(redata,"*"); 父级页面监听消息 window.addEventListener

3.3K21发布于 2021-03-04

来自专栏全栈程序员必看

关于html5的PostMessage的用法总结

大家都知道，网页之间传递数据可以使用ajax请求来完成，今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢？首先，postMessage是html5新增的一个解决跨域的一个方法。 DOCTYPE html> <html> <head> <title>window.postMessage</title> <meta charset="utf-8"/>

test接收区< f.οnlοad=function(){ setTimeout(function(){ f.contentWindow.postMessage("谢霆锋","http://localhost: 注意：postMessage的写法，postMessage之前写的是你要通信的window对象（也就是你要向谁通信），此时的window.parent的权限仅限于此，不能在像同域似的，进行获取父级的DOM (data, 'http://localhost:8080/'); // 若父页面的域名和指定的不一致，则postMessage失败 // parent.postMessage(data, '*

1.3K20编辑于 2022-09-14

来自专栏FreeBuf

如何利用postMessage窃取编辑用户的Cookie信息

postMessage介绍相信大家都听过不同窗口之间的通信、当前窗口与内部iframe框架的通信以及一些跨域技巧，window.postMessage功能就是允许在两个客户端的窗口/frames间发送数据信息在HTML5中，Window.postMessage() 方法可以安全地实现跨源通信。具体请参考postMessage的详细介绍。仔细分析其中的 sync.html 文件，其中包含了一个postMessage方法，它向变量名为wOrigin的目标发送了消息，如下： window.parent.postMessage(JSON.stringify 由于目标系统包含postMessage方法的文件只有57行代码，我决定好好分析一下。

1.9K40发布于 2019-05-09

来自专栏web技术开发分享

window.postMessage和window.dispatchEvent的区别

postMessage 和 window.dispatchEvent 是两种不同的机制，虽然它们都可以通过 window.addEventListener 监听，但它们的设计目的、使用场景和功能有很大的区别以下是它们的详细对比： 1. postMessage postMessage 是用于跨文档通信的机制，主要用于在不同窗口、iframe 或不同域之间传递消息。特点：跨域支持：postMessage 是 HTML5 提供的标准 API，专门用于解决跨域通信问题。它可以在不同源（不同协议、域名或端口）的窗口或 iframe 之间安全地传递消息。消息传递：通过 postMessage，可以发送结构化数据（字符串、对象、数组等）到目标窗口。如果需要跨窗口或跨域通信，使用 postMessage。如果只在同一文档内通信，使用 window.dispatchEvent。 5.

86310编辑于 2025-05-21

来自专栏Java学习网

详解使用postMessage解决iframe跨域通信问题

在window对象下有个postMessage方法，是专门用来解决跨域通信问题的。关于postMessage的详细介绍请戳这里，不过MDN的文档太详细了，导致有些同学看完还是一脸懵逼，下面我们就来看看怎么用postMessage实现iframe跨域通信，当你会用了之后再回去看文档，感觉是完全不同的的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。 postMessage方法第一个参数是要发送的数据，可以是任何原始类型的数据。 postMessage方法第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，我们设置为*，代表所有url都允许发送。

5.9K21发布于 2021-10-13

来自专栏FreeBuf

安全研究 | 由postMessage导致Facebook账户劫持的DOM XSS

利用第一个漏洞可以通过postMessage方式从facebook.com网站中发送跨域（cross-origin）消息，存在漏洞的路径会接收攻击者在请求参数中构造的控制内容，同时会以postMessage 漏洞：通过postMessage方式从facebook.com网站中发送跨域（cross-origin）消息存在漏洞的路径为https://www.facebook.com/payments/redirect.php ）图中的目标域为our.intern.facebook.com，该域名一般都为Facebook内部使用，因此从其信息来看，里面的postMessage方法貌似仅是提供给Facebook内部员工请求使用的 version=X’，然后触发一个postMessage方式的消息发送（此前另一个安全研究者也曾在该页面中发现了另一个厉害的漏洞），在此行为中的page_proxy页面代码片段为：该代码片段主要完成两件事情，第一，它会通过postMessage用frameName方法向任意域发送一条消息；第二，它会设置一个事件监听器EventListener静待消息。

1.3K10编辑于 2023-04-26

第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页

点击加载更多

postMessage与postMessage跨域

postMessage详解