【JavaScript】iframe postMessage 通信

前端学习(2075):计算属性的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt... 阅读详情

嵌入 iframe

   <iframe
     src="/model/index.html"
     id="modelIframe"
     name="modelIframe"
     frameborder="0"
   ></iframe>

发送信息

let modelIframe: any;

// 初始化
document.getElementById('modelIframe').onload = function () {
  modelIframe = window.frames['modelIframe'];
};

// 发送
modelIframe.window.postMessage(['37f1adba-6b8e-4c77-ab53-173bc7a15faf']);

接受信息

  window.addEventListener(
    'message',
    (e) => {
      console.log(e.data);
      sceneParse.selectObjects(e.data);
    },
    false,
  );

感谢

iframe父子通信,看这篇就够了
终于搞懂了 Iframe (跨窗口通信)

原生 JavaScript 2种 iframe 通信方案对比:postMessage vs 直接函数调用 本文深入对比了原生JavaScript中iframe通信的两种主流方案:postMessage与直接函数调用。详细解析了postMessage的跨域实现原理、安全实践及性能优化技巧,同时分析了同源环境下直接函数调用的适用场景与限制。通过特性对比表和实测数据,帮助开发者根据安全需求、性能要求和跨域场景选择最佳通信方案。 阅读详情

相关推荐

单片机多级菜单的简单实现

单片机多级菜单的简单实现 多级菜单的思路 最近想把stm32上的oled显示屏做的好看一些,于是动手写了写一个多级菜单,思路很简单,每个页面用单独的函数封装好,每个功能也是用单独的函数进行封装,用了3个按键,两个切换键,一个确定键。 首先来看看用啥判断页面的(这偷个懒,希望没人打我) //页面标志位 uint8_t s1 = 0; //主页面功能号 uint8_t s2 = 0; //主次页面判断标志位 uint16_t s3 = 1; //次页面功能号 主页面的显示函数,这是个很枯燥的一

qq_43940175的博客 7604

【JS】postMessage 用法(可以给iframe传值)

跨文档消息,有时候也简称为`XDM(cross-document messaging)`,是一种在不同执行上下文(如不同源的页面)间传递信息的能力。 例如:`www.wrox.com`上的页面想要与包含在内嵌窗格中的`p2p.wrox.com`上面的页面通信 `XMD`的核心就是`postMessage()`方法,将`message`传递给指定窗口

qq_45677671的博客 1万+

数据集分享 | IWR1642呼吸心跳数据集

雷达开源数据库 数据集

【调皮连续波】雷达技术领域知识博主 3204

【JS】postMessage实现iframe跨域通信

【JS】postMessage实现iframe跨域通信

owo_ovo的博客 2156

有了网段为什么还要有VLAN???

近几日,在学习VLAN及VXLAN方面的知识,对于产生原因做一个总结及详解。 VLAN(Virtual Local Area Network,虚拟局域网),其主要用途是用来缩小广播域,即进行隔离。 先对广播域的一个概念做如下描绘:如下图,主机A、B、C、D均连接在交换机SW1上,其中A、C同网段为192.168.252网段,而B和D同网段,为192.168.250网段。 现,假如A与C第...

dandandean_96的博客 6885

三、STM32F103ZET6最小系统

stm32最小系统除去主控CPU外,需要包含,电源电路,复位电路,BOOT电路,时钟电路(因为stm32有内置时钟,对时钟要求不高的话,可以不要)。NRST引脚其实芯片已经用一个约40K的电阻上拉了,所以理论上来说是不需要再外接上拉电阻的,但我看大家都是有外接上拉的,心里没有底,不管这么多,先预留着。吃过亏,特意查看了芯片手册资料,下图是官方建议的供电方案,图片来自stm32f103zet6数据手册。首先明白目标,单纯的学习软件知识并不是我希望的,我还希望会硬件设计,这样后面才能摆脱开发板。

sevendecsdn的博客 6450

postMessage 通信 | Iframe 通信

父级判断 Iframe 是否有效,且只有 Iframe 加载完毕后才能成功传递 message。

然后他就拿棍子来打我 1759

Dobot Magician机械臂二次开发指南:如何利用Python脚本和I/O接口实现自动化任务

本文详细介绍了Dobot Magician机械臂的二次开发方法,重点讲解如何通过Python脚本和I/O接口实现高级自动化任务。内容包括开发环境搭建、运动控制API解析、I/O接口应用以及典型场景实现,帮助开发者充分发挥Dobot Magician的潜力,适用于工业自动化、教育科研等领域。

weixin_26968079的博客 267

超好用的iframe的postMessage穿参

最近在调用公司其他部门的iframe标签的 SDK脚本 出现了问题,在web项目中通过iframe嵌入另一个第三方web项目,第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行路由跳转,这时候两个项目存在了数据交互,显然违反了同源策略,在HTML5标准引入的window对象下的postMessage方法,可以允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

weixin_43719925的博客 6606

MobaXterm简介和使用(服务器连接工具)

MobaXterm 是一个功能强大的远程计算工具,集成了许多常用的远程计算功能,包括 SSH、X11、RDP、VNC、FTP、SFTP 等。

清平乐的技术专栏 1939

全网详细解决Client does not support authentication protocol requested by server;consider upgrading Mysql c

全网详细解决1251 - Client does not support authentication protocol requested by server; consider upgrading Mysql client。

念兮为美 5476

js中iframe通过postMessage进行通信

js中iframe通过postMessage进行通信

ingenuou_的博客 397

2024年广东省职业院校技能大赛“区块链技术应用”任务书—区块链应用系统开发参考答案

摘要 本文档提供了2024年广东省职业院校技能大赛"区块链技术应用"项目中区块链电子签章前端功能开发的参考答案。主要内容包括:1)注册页面开发,实现身份证号码双向绑定和注册请求发送;2)登录页面开发,实现用户认证、状态保存和页面跳转;3)个人印章页面开发,实现注销功能和印章信息展示。每个任务均包含具体实现代码片段和功能测试要点,涵盖Vue.js框架下的数据绑定、axios请求处理和本地存储等关键技术点。

我是网络安全兼技能大赛工程师,专注网络安全技术学习与技能大赛实战!持续分享最新的技术文章,帮你少走弯路,一起在技术赛道上进步~ 343

Javascript使用postMessage对iframe跨域通信

今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 页面代码:www.a.com/a.html <iframe id="myIframe" s...

weixin_30824599的博客 449

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

window.postMessage 跨窗口,跨iframe javascript 通信

同源通信 执行它们的页面位于具有相同的协议(http/https),端口(80/443),主机(通常为域名) 时,这两个脚本才能相互通信 大多数情况下,网站就是内部的域名,所以是同源通信,可以相互访问 非同源通信 不同域名,不同窗口,内嵌iframe(可能是外部域名地址) 这种就是非同源通信, window.postMessage() 方法可以安全地实现跨源通信...

244

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

js 简单使用postMessage iframe跨域通信

js 简单使用postMessage iframe跨域通信

leveretz的博客 759

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

Pym.js完全指南:如何让iframe实现响应式高度与宽度自动调整

在现代网页开发中,iframe的响应式设计一直是前端工程师面临的挑战。Pym.js作为一款轻量级JavaScript库,能够根据内容高度和容器宽度自动调整iframe大小,完美解决了跨域iframe的响应式适配问题。无论是嵌入数据可视化图表、交互式组件还是第三方内容,Pym.js都能确保iframe在各种设备上呈现最佳效果。 ## 为什么选择Pym.js?解决iframe响应式难题 传统ifr

gitblog_00654的博客 249

前端跨域 iframe 通信别再手写 postMessage:用 iframe-js 实现 ACK、RPC 与状态同步

《iframe-js:一个解决跨域iframe通信痛点的轻量级工具》文章摘要: 这个开源项目源于作者在实际开发中遇到的iframe跨域通信难题。从最初封装postMessage的小工具,逐步发展为功能完善的iframe-js库,历时三年迭代。该库主要解决iframe通信中的六大痛点:消息丢失、接收确认、回调地狱、高度自适应、消息干扰和安全校验。核心功能包括:Promise风格的ACK确认机制、RPC远程调用、状态同步、自动高度适应以及严格的白名单校验。支持Vue/React等框架,提供TypeScript类

Apcallover的博客 317

【父传子、子传父】用原生js的postMessage或方法function实现iframe传值,也可以用于跨域嵌套iframe传值,父级子级页面相互传数据

摘要:本文介绍了JavaScript的postMessage()方法实现跨域通信的应用。通过父页面parent.html和子页面child.html的示例代码,展示了如何使用postMessage进行双向数据传递。文章详细说明了方法语法、参数含义,并提供了两种实现方式:直接使用postMessage和通过函数调用。代码中包含消息监听、来源验证、数据传递等关键实现步骤,为开发者提供了完整的跨域通信解决方案。文中还强调了安全验证的重要性,建议通过origin参数验证消息来源。

我驾驶汽车从不是为了从A点到达B点,我喜欢去感受汽车,与之交流,与之融为一体。 6613

Pym.js入门教程:3分钟快速实现响应式iframe嵌入

想要在网页中嵌入第三方内容,但又担心iframe在不同设备上显示异常?😟 还在为iframe高度自适应问题头疼吗?今天我来为你介绍一个终极解决方案——**Pym.js**!这个由NPR开发的轻量级JavaScript库,能够让你的iframe完美适应各种屏幕尺寸,实现真正的响应式嵌入体验。🎯 ## 什么是Pym.js?为什么你需要它? **Pym.js**是一个专门解决iframe响应式问

gitblog_01189的博客 769

HTML5:使用postMessage实现Ajax跨域请求

HTML5:使用postMessage实现Ajax跨域请求 由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等。 常规的几种解决方法: (1) document.domain+iframe; (2) 动态创建script; (3) iframe+location.hash; (4) flash。 这里不细说这几种方法,记录的...

weixin_30410999的博客 222

Iframe去嵌入ThingJS的物联网项目传值postMessage

1.页面代码 <div width="800px"> <button style="position: absolute;top: 15px;left: 15px;width: 75px;" onclick="flyToCar()">飞到小车</button> <button style="position: absolute;top: 45px;left: 15px;width: 75px;" onclick="flyToBack()">返&

熊宗的博客 588

vue中iframe嵌套页面父子组件互相通信

/iframe向父组件通信,子传父。

yqlnihao的博客 1331

Axure实战:用IFrame+JS搞定父子页面菜单联动(附完整代码)

本文详细介绍了在Axure原型设计中,如何利用IFrame与JavaScript实现父子页面间的菜单联动交互。通过核心代码示例和分步教程,帮助产品经理和设计师突破Axure原生交互限制,构建高保真、状态同步的动态原型,有效模拟复杂应用的无缝用户体验。

y7z8a的博客 209
上一篇: 【CSS】用 CSS 写一个渐变色边框的输入框
下一篇: 【Element】el-table 使用 el-table-infinite-scroll 插件实现滚动加载
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值