HTML5 postMessage 消息传输与 POST 跨域通信

2024-06-23 06:58
文章标签 html5 postmessage post 跨域 传输 通信 消息 frontend

本文主要是介绍HTML5 postMessage 消息传输与 POST 跨域通信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！


HTML5 的 postMessage 方法可实现不同窗体间互相通信。

postMessage 支持实现跨文档消息传输（Cross Document Messaging），并且可跨域传输信息。Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4 以上版本浏览器都已支持 postMessage。

1. postMessage 功能简介

postMessage 主要包含两个 API：

1).消息监听：onmessage
2).消息发送：postMessage

使用步骤也很简单：

1.1.监听发送过来的消息

1 window.addEventListener('message', onMessage, false);
2  
3 var onMessage = function(){
4     console.log(e, e.data);
5     if(e.origin !="http://lzw.me"){
6         return false;
7     }
8     // 消息处理...
9 }

注意：

e.data 即接收到的信息。
由于该监听可接收任意发送过来的消息，故一般应对 e.origin 来源进行检测，如果不是预设的消息来源，应予以拒绝处理。

1.2.向其他窗体发送消息

首先获取要传送消息的窗体对象（如iframe），然后向该对象发送信息

1 var iframeWin = document.getElementsByTagName('iframe')[0].contentWindow;
2 iframeWin.postMessage('hello world!', "*");

注意：

postMessage 包含两个参数，第一个参数为发送的消息内容，为字符串类型。第二个为来源域限制。即限制接收窗体的 URL。

进行跨文档消息发送，首先要获取传送对象窗体。所以 postMessage 常用在从当前页创建/打开新窗体或新的 worker 线程中，实现双方通信。请与志文工作室一起来看如下使用示例。

2. worker 多线程

消息接收处理页面：

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <meta http-equiv="X-UA-Compatible" content="IE=edge">
06 <title>Test Web worker</title>
07 <script type="text/JavaScript">
08 function init(){
09 var worker = new Worker('compute.js');
10  
11 //event 参数中有 data 属性，就是子线程中返回的结果数据
12 worker.onmessage= function (event) {
13 // 把子线程返回的结果添加到 div 上
14 document.getElementById("result").innerHTML += event.data+"<br/>";
15 };
16 }
17 </script>
18 </head>
19 <body onload="init()">
20 <div id="result"></div>
21 </body>
22 </html>

消息发送 compute.js

compute.js 中调用 postMessage 方法发送计算结果

01 var i=0;
02  
03 function timedCount(){
04 for(var j=0,sum=0;j<100;j++){
05 for(var i=0;i<100000000;i++){
06 sum+=i;
07 }
08 }
09 // 调用 postMessage 向主线程发送消息
10 postMessage(sum);
11 }
12  
13 postMessage("Before computing,"+new Date());
14 timedCount();
15 postMessage("After computing,"+new Date());

3. 跨域

同源跨域可通过修改 window.domain 方式欺骗解决。
非同源跨域可使用 flash 控件或远程加载script文件的 jsonp 方式。

现在 postMessage 则可简单完成该需求，重要的是，它可以实现 jsonp 无法完成的跨域 POST 请求。

3.1 父窗体创建跨域iframe并发送信息

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <meta http-equiv="X-UA-Compatible" content="IE=edge">
06 <title>跨域POST消息发送</title>
07 <script type="text/JavaScript">
08 function sendPost(){
09 var iframeWin = document.getElementById("otherPage").contentWindow;
10 iframeWin.postMessage( document.getElementById("message").value, "http://w.lzw.me:81");
11 }
12  
13 window.addEventListener("message", function( event ) {
14 console.log(event, event.data);
15 }, false);
16 </script>
17 </head>
18 <body>
19 <textarea id="message"></textarea>
20 <input type="button" value="发送" onclick="sendPost()">
21 <iframe src="http://w.lzw.me:81/other-domain.html" id="otherPage" style="display:none"></iframe>
22 </body>
23 </html>

3.2 子窗体接收信息并处理（如发起XMLHttpRequest请求）

other-domain.html

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <meta http-equiv="X-UA-Compatible" content="IE=edge">
06 <title>POST Handler</title>
07 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
08 <script type="text/JavaScript">
09 window.addEventListener("message", function( event ) {
10 // 把父窗口发送过来的数据向服务器发送post请求
11 var data = event.data;
12 $.ajax({
13 type: 'POST',
14 data: "info=" + data,
15 dataType: "json"
16 }).done(function(res){
17 //可以向父窗体返回结果
18 window.parent.postMessage(res, "*");
19 }).fail(function(res){
20 window.parent.postMessage(res, "*");
21 });
22 }, false );
23 </script>
24 </head>
25 <body>
26 </body>
27 </html>

4. postMessage 总结

postMessage 解决了客户端不同窗体间的消息传递问题，特别是跨域消息发送，可解决跨域 POST 请求问题。

另外，解决客户端与服务器的双向实时通信，可参考 HTML5 的 webSocket API.

5. 相关参考

http://www.ibm.com/developerworks/cn/web/1301_jiangjj_html5message/

这篇关于HTML5 postMessage 消息传输与 POST 跨域通信的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1086446。

相关文章

vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
通信系统网络架构_2.广域网网络架构

通信系统网络架构_2.广域网网络架构

1.概述          通俗来讲，广域网是将分布于相比局域网络更广区域的计算机设备联接起来的网络。广域网由通信子网于资源子网组成。通信子网可以利用公用分组交换网、卫星通信网和无线分组交换网构建，将分布在不同地区的局域网或计算机系统互连起来，实现资源子网的共享。 2.网络组成          广域网属于多级网络，通常由骨干网、分布网、接入网组成。在网络规模较小时，可仅由骨干网和接入网组成
阅读更多...
ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式 需求流程实现步骤定义msg文件编辑配置文件编译 在 ROS 通信协议中，数据载体是一个较为重要组成部分，ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是，这些数据一般只包含一个 data 字段，结构的单一意味着功能上的局限性，当传输一些复杂的数据，比如:
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...
基于Springboot + vue 的抗疫物质管理系统的设计与实现

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
阅读更多...
探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输

探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输

蓝牙（Bluetooth）是一种短距离无线通信技术，广泛应用于各种电子设备之间的数据传输。自1994年由爱立信公司首次提出以来，蓝牙技术已经经历了多个版本的更新和改进。本文将详细介绍蓝牙协议，并通过一个具体的项目——使用ESP32实现蓝牙音频传输，来展示蓝牙协议的实际应用及其优点。 蓝牙协议概述 蓝牙协议栈 蓝牙协议栈是蓝牙技术的核心，定义了蓝牙设备之间如何进行通信。蓝牙协议
阅读更多...
vue+el国际化-东抄西鉴组合拳

vue+el国际化-东抄西鉴组合拳

vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585 说得比较详细。 另外做点补充，比如这里cn下的可以以项目模块加公共模块来细分。 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = {mess
阅读更多...
vue同页面多路由懒加载-及可能存在问题的解决方式

vue同页面多路由懒加载-及可能存在问题的解决方式

先上图，再解释 图一是多路由页面，图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应，并且图二的路由层在跟图一对应的页面中要加上components层，多一个s结尾，里面的的方法名就是图一路由的name值，里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2