postMessage详解

一、概述

二、详解

一、概述

作用

该方法是HTML5引入的API，可以通过异步方式实现跨源通信，多用于窗口间数据通信。它提供了一种受控机制来规避不同源脚本无法通信的限制，只要正确使用，这种方法很安全。

什么是跨源

同源即指相同的协议、域名或IP、端口号。浏览器具有同源限制，同源脚本可以相互通信，一般非同源（跨源）的脚本文件禁止相互通信。

语法

message事件

通过绑定window的message事件来监听发送的跨文档消息传输内容。

二、代码示例

示例1

发送程序如下代码所示。

<div><input id="text" type="text" value="demo" /><button id="btn">发送消息</button>
</div>
<iframe loading="lazy" id="iframe" src="https://c.runoob.com/runoobtest/postMessage_receiver.html" width="300" height="360"><p>你的浏览器不支持 iframe。</p>
</iframe><script>window.onload = function() {var receiver = document.getElementById('iframe').contentWindow;var btn = document.getElementById('btn');btn.addEventListener('click', function (e) {e.preventDefault();var val = document.getElementById('text').value;receiver.postMessage("Hello", "https://c.runoob.com");});}
</script>

接收程序如下代码所示。

<script>
// 监听 message 事件
window.addEventListener('message', function (e) {  if (e.origin !== "https://www.runoob.com") {  // 验证消息来源地址return;}console.log("从"+ e.origin +"收到消息： " + e.data);
});
</script>

e.source：消息源，消息的发送窗口/iframe
e.origin：消息源的URL（可能包含协议、域名或IP、端口），用来验证数据
e.data：发送过来的数据

示例2：iframe父子页面通信

接收消息的一方需要监听message事件。

window.addEventListener(“message”, ()=> { });

父页面向子页面传递信息。

let ifr = document.getElementById("iframe")
ifr.contentWindow.postMessage('父页面向子页面发送消息', "*")// orifr.contentWindow.postMessage('父页面向子页面发送消息', "http://10.192.195.166:56225/son.html")

子页面向父页面传递数据。

window.parent.postMessage('子页面向父页面发送消息','*')

postMessage详解相关推荐

前端跨域之PostMessage详解
window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以 ...
DELPHI 中 Window 消息大全使用详解
Window 消息大全使用详解导读: Delphi是Borland公司的一种面向对象的可视化软件开发工具. Delphi集中了Visual C++和Visual Basic两者的优点:容易上手.功能 ...
【转】4.1触碰jQuery：AJAX异步详解
传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...
窗口发送消息参数详解
窗口发送消息参数详解 // 窗口.发送消息函数功能: 将指定的消息发送到一个窗口,同win32 api 里面的SendMessage等同的效果中文函数原型: 发送消息(hwnd,msg ...
[vb]一些窗口消息的详解
代码: Public Const WM_NULL = &H0 '空消息 Public Const WM_NCCREATE = &H81 '当窗口第一次被创建时,此消息在WM_CREAT ...
Windows 窗口发送消息参数详解
窗口发送消息参数详解 // 窗口.发送消息函数功能: 将指定的消息发送到一个窗口,同win32 api 里面的SendMessage等同的效果中文函数原型: 发送消息(hwnd,msg,wparam ...
Windows API函数大全---附：windows运行命令详解
1. API之网络函数 WNetAddConnection 创建同一个网络资源的永久性连接 WNetAddConnection2 创建同一个网络资源的连 ...
VC++深入详解学习笔记
VC++深入详解学习笔记 Lesson1: Windows程序运行原理及程序编写流程 Lesson2: 掌握C++基本语法 Lesson3: MFC框架程序剖析 Lesson4: 简单绘图 Lesso ...
JavaScript作用域和作用域链详解
JavaScript作用域链详解一.JavaScript作用域 JavaScript作用域是什么? 作用域范围二.JavaScript作用域链作用域与执行上下文总结一.JavaScript作 ...

postMessage详解

一、概述

二、代码示例

postMessage详解相关推荐

最新文章

热门文章