首页 > 其他分享 >BOM-跨源通信

BOM-跨源通信

时间:2023-04-20 09:35:47浏览次数:47  
标签:origin postMessage 窗口 跨源 通信 window BOM message 接收

Window postMessage() 方法 | 菜鸟教程 (runoob.com)

1、介绍

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow 其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
  • message 将要发送到其他 window的数据。一般是指文本数据
  • targetOrigin 指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI。
  • transfer 可选,是一串和 message 同时传递的 Transferable 对象。

2、示例

(1)发送

基于postMessage函数,将数据发送出去。是否接收,以及接收之后如何处理,分别在各个窗口进行定义。

(2)接收

在待接收消息的窗口里写入js,监听。

window.onload = function() {
    window.addEventListener('message', function (e) {  // 监听 message 事件
        alert(e.origin);
        if (e.origin !== "https://www.runoob.com") {  // 验证消息来源地址
            return;
        }
        alert(e.origin +"@"+e.data)
    });
}
  • e.source – 消息源,消息的发送窗口/iframe。
  • e.origin – 消息源的 URI(可能包含协议、域名和端口),用来验证数据源。
  • e.data – 发送过来的数据。

标签:origin,postMessage,窗口,跨源,通信,window,BOM,message,接收
From: https://www.cnblogs.com/wd404/p/17335612.html

相关文章

  • BOM-本地存储和会话存储
    1、介绍本地存储和会话存储,分别指window.localStorage和window.sessionStorage。两者具有基本相同的语法,都可以存储数据到浏览器中,区别在于localStorage是永久存储,而sessionStorage是会话存储。2、语法storage表示window.localStorage和window.sessionStorage。(1)写入或保存/......
  • 基于UDP协议的Socket通信
    TCP和UDP最大的区别在于是否需要客户端与服务端建立连接后才能进行数据传输,如果你学习前面的TCP,传输前先开服务端,accept,等客户端接入,然后获得客户端socket然后进行IO操作,而UDP则不用,UDP以数据报作为数据的传输载体,在进行传输时首先要把传输的数据定义成数据报(Datagram),在数据报中......
  • 基于UDS的DoIp实现(六) -- 通信协议实现:Socket 通信
    ISO14229、UDS诊断服务文档,都说明UDS是基于Can通信实现,其接收的数据格式,也是Can数据格式。但是,一方面是在本地模拟Can通信比较麻烦,另一方面,也是想单独的将UDS抽出来,不依赖于通信协议,仅仅作为一个单独的功能进行实现,所以,这里才使用比较简单的Socket通信进行数据收发。一、Sock......
  • [PLC]三菱Q系列MODBUS通信(QJ71C24N串口模块)
    三菱Q系列MODBUS通信(QJ71C24N串口模块)CPUQ01通信模块:QJ71C24N通信协议:MODBUSRTU编程软件:GXWORK2 打开GXWORK2,新建工程,然后右键点击智能功能模块 安装位置根据硬件实际情况设定,此处注意起始XY地址,后面会用到。     双击开关设置 CH2设置如下,通信协议......
  • 基于TCP协议的Socket通信
    上节中我们给大家接触了Socket的一些基本概念以及使用方法,相信大家对Socket已经有了初步的掌握。本节我们学习使用Socket来实现大文件的断点续传!在这里我们以他人的案例进行讲解,这是别人写好的一个Socket上传大文件的例子,不要求我们自己可以写出来,需要的时候会用就好!1.运行效果图1.......
  • 如何借助无线通讯终端实现组态王与PLC之间通信?
    本方案是基于ModbusRTU协议下实现的1主多从自组网无线通信形式,主站为组态王,从站为两台三菱FX5UPLC。在工厂里,组态王和plc所处位置距离较为分散,重新铺设电缆线工期长,成本高,故采用日系PLC专用无线通讯终端DTD435MC,作为实现无线通讯的硬件设备,来解决组态王与PLC之间的通讯问题。无线......
  • 理解Android系统的进程间通信原理(一)----RPC中的代理模式
    理解Android系统的进程间通信原理(一)----RPC中的代理模式Android系统中的进程间通信是通过一个轻量级的RPC(RemoteProcedureCall远程进程调用)和AIDL(AndroidInterfaceDefininationLanguage)规范来生成两个进程之间可以相互访问的代码。其中RPC是以接口方式来实现,客户端与被......
  • angular开发从入门到入土第二节(组件通信)
    一.input和output1.子组件通过@Input装饰器获取到父组件传递的值//子组件html模板<p>child</p><div>{{showText}}</div>子组件类import{ChangeDetectionStrategy,Component,Input}from'@angular/core';@Component({selector:'app-my-co......
  • [PLC]S7-1200 串行通信
    S7-1200串行通信S7-1200支持的串行通讯方式· 点对点(PtP)通信· Modbus主从通信· USS通信 名称CM1241RS232CM1241RS422/485CB1241RS485订货号6ES7241-1AH32-0XB06ES7241-1CH32-0XB06ES7241-1CH30-1XB0通讯口类型RS232RS422/RS485......
  • 操作系统试验-进程间通信:借鉴生产者-消费者示例程序,利用FIFO或消息队列实现操作系统中
    实验名称操作系统试验-进程间通信实验目的借鉴生产者-消费者示例程序,利用FIFO或消息队列实现操作系统中的经典生产者-消费者问题,要求:1、仓库有26个存储单元;2、具有两个以上的生产者与消费者;3、生产者和消费者以随机的方式对仓库进行访问;4、在任意时刻,仓库里面只有一个进程;5、仓库满......