当前位置: 首页 > news >正文

VUE+内置iframe传值失效问题解决

起因:

        公司业务需要计算建筑物截收面积,然后我采用的是openCV来计算,在vue内部引用不了,然后就采用了iframe原生html来完成;功能实现了我想让iframe和vue通信;然后用原有方式试了多次都失败了,iframe传值可以但是拿取vue父级传递的数据总是undefined;

解决:

        猜想可能是iframe加载的问题所以我采用了以下方式去传递:

 //通过.contentWindow.postMessage(data,"*")向iframe子组件传值let iframe = document.getElementById("iframeComplex");iframe.onload = () => {setTimeout(() => {console.log(this);let that = this;iframe.contentWindow.postMessage({cmd: "getBuildForm",params: {data: that.data,},},"*");}, 10);}

然后iframe:

 // iframe获取Vue传递过来的信息window.addEventListener("message", getVueMsg);function getVueMsg(event) {const res = event.data;if (res.cmd == 'getBuildForm') {if (res.params.data.properties.length > 0) {setTimeout(() => {createModel();}, 100)}}};

解决。

http://www.lryc.cn/news/317590.html

相关文章:

  • Day31:安全开发-JS应用WebPack打包器第三方库JQuery安装使用安全检测
  • Go Zero微服务个人探究之路(十六)回顾api服务和rpc服务的本质
  • 基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的夜间车辆检测系统(深度学习代码+UI界面+训练数据集)
  • Spring体系架构
  • 【PLC】现场总线和工业以太网汇总
  • 【吊打面试官系列】Java虚拟机JVM篇 - 关于JVM分析
  • Mysql锁与MVCC
  • rancher是什么
  • 阿里云服务器安全狗免费使用多引擎智能查杀引擎
  • 使用rust实现九九乘法表
  • 突破编程_C++_设计模式(简单工厂模式)
  • C语言——快速排序
  • FP独立站获客秘籍大揭秘:简单高效,一看就会!
  • 英伟达tx2光驱烧录功能支持
  • 关于stm32(CubeMX+HAL库)的掉电检测以及flash读写
  • Elastic script_score的使用
  • 【Spring Boot 3】获取已注入的Bean
  • C# 对于点位置的判断
  • 最新CLion + STM32 + CubeMX 开发环境搭建
  • 【Python3】观察者模式
  • HTML5 Web Worker之性能优化
  • 应对恶意IP攻击的有效方法
  • 如何使用“Docker registry创建本地仓库,在服务器之间进行文件push和pull”?
  • Rocky Linux - Primavera P6 EPPM 安装及分享
  • API 管理调研
  • 在centOS服务器安装docker,并使用docker配置nacos
  • JVM运行时数据区概述以及分别存放的内容
  • 数据体系规范化
  • 从政府工作报告探计算机行业发展
  • 【软件工具】网络性能测试工具 Iperf