vue父页面给iframe子页面传值

news2024/12/22 18:46:34

在vue父页面有两个个参数 名称和图标,需要把这两个参数传到iframe的地图里面,在地图触发绘点事件的时候,获取到传来的参数并且展示

vue:传值给子页面iframe

// 传值给子页面iframe(2个参数)
            handleIframeLoad() {
                const iframeWindow = this.$refs.myIframe.contentWindow;
                const data = {
                    imgUrl: this.imgUrl,
                    name: this.name,
                };
                iframeWindow.postMessage(data, '*');
            },

iframe接收父页面的值
在iframe中,使用window.addEventListener监听message事件,然后在事件处理程序中获取传递的数据:

<!-- iframe.html -->
<script>
// 监听来自vue父页面的消息
window.addEventListener('message', function(event) {
  const data = event.data;
  // 在这里处理接收到的消息
  console.log('Received message from parent:', data);
});
</script>

当父页面中的按钮被点击时,会将值传递给子页面的iframe元素。子页面通过监听message事件获取传递的值,并进行相应的处理。

这种方法需要父页面和子页面在同一个域名下,否则会因为浏览器的同源策略而导致通信失败。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/866634.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

海康威视iVMS综合安防系统任意文件上传(0Day)

漏洞描述 攻击者通过请求/svm/api/external/report接口任意上传文件,导致获取服务器webshell权限,同时可远程进行恶意代码执行。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和…

安全第二次

一&#xff0c;iframe <iframe>标签用于在网页里面嵌入其他网页。 1&#xff0c;sandbox属性 如果嵌入的网页是其他网站的页面&#xff0c;因不了解对方会执行什么操作&#xff0c;因此就存在安全风险。为了限制<iframe>的风险&#xff0c;HTML 提供了sandb…

HCIA---动态路由---RIP协议

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 目录 前言 一.动态路由 二.动态路由协议分类 IGP&#xff1a;内部网关协议 EGP:外部网关协议 三.RIP协议概述 RIP版本分类&#xff1a; RIP三要素&#xff1a; 思维…

TypeScript 关于对【泛型】的定义使用解读

目录 概念导读泛型函数多个泛型参数泛型约束泛型别名泛型接口泛型类总结&#xff1a; 概念导读 泛型&#xff08;Generics&#xff09;是指在定义函数、接口或类的时候&#xff0c;不预先指定具体的类型&#xff0c;而在使用的时候再指定类型的一种特性。使用泛型 可以复用类型…

【非科班如何丝滑转码?】探索计算机领域跳槽之路

近年来&#xff0c;计算机领域的蓬勃发展吸引着越来越多非计算机科班出身的人士投身其中。本文将就如何顺利实现非科班转码&#xff0c;计算机岗位的发展前景&#xff0c;以及现阶段转码的建议&#xff0c;结合个人经验和观察&#xff0c;为您阐述详细全面的观点。 一、如何规划…

【雕爷学编程】Arduino动手做(201)---行空板开发环境之VSCode

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

Kotlin 基础教程一

Kotlin 基本数据类型 Java | Kotlin byte Byte short Short int Int long Long float Float double Double boolean Boolean c…

PHP最简单自定义自己的框架view使用引入smarty(8)--自定义的框架完成

1、实现效果。引入smarty&#xff0c; 实现assign和 display 2、下载smarty&#xff0c;创建缓存目录cache和扩展extend 点击下面查看具体下载使用&#xff0c;下载改名后放到extend PHP之Smarty使用以及框架display和assign原理_PHP隔壁老王邻居的博客-CSDN博客 3、当前控…

xmind用例数据上传至禅道

xmind格式参考&#xff0c;只需要在一级子主题填写对应用例模块ID&#xff0c;其余格式随意即可生成用例并直接上传到禅道&#xff1a; 代码里需填写禅道对应登录账号及用例所属产品 import requests import json import re import hashlib import pprint import threading fr…

并发——Atomic 原子类总结

文章目录 1 Atomic 原子类介绍2 基本类型原子类2.1 基本类型原子类介绍2.2 AtomicInteger 常见方法使用2.3 基本数据类型原子类的优势2.4 AtomicInteger 线程安全原理简单分析 3 数组类型原子类3.1 数组类型原子类介绍3.2 AtomicIntegerArray 常见方法使用 4 引用类型原子类4.1…

段页式储存结构

题目&#xff1a;假设段页式储存结构系统中的地址结构如下图所示 从图中可知段号22-31占了10位&#xff0c;页号12-21占了10位&#xff0c;页内地址0-11占了12位 段&#xff1a; 最多有2^101024个段 页&#xff1a;每段最大允许2^101024个页 页的大小&#xff1a; 2^124x2^1…

【C++精华铺】6.C++类和对象(下)类与对象的知识补充及编译器优化

目录 1. 再谈构造 1.1 成员变量的初始化&#xff08;初始化列表&#xff09; 1.2 初始化列表的行为 1.3 explicit关键字 2. 类中的static成员 2.1 静态成员变量 2.2 静态成员函数 3. 友元 3.1 友元函数 3.1 友元类 4. 内部类 5. 匿名对象 6. 对象拷贝时候的编译器优化…

Linux网络编程 socket编程篇(一) socket编程基础

目录 一、预备知识 1.IP地址 2.端口号 3.网络通信 4.TCP协议简介 5.UDP协议简介 6.网络字节序 二、socket 1.什么是socket(套接字)&#xff1f; 2.为什么要有套接字&#xff1f; 3.套接字的主要类型 拓】网络套接字 三、socket API 1.socket API是什么&#xff1f; 2.为什么…

Qt通过QSS设置QPushButton的样式

同时设置QPushButton的文字样式和图标的方法 为了美化界面&#xff0c;有时候需要修改QPushButton的样式&#xff0c;让一个QPushButton上面既要显示图标&#xff0c;又要显示文字内容 起初我的做法是重写QPushButton&#xff0c;这样做可以实现&#xff0c;但是有几个问题 实现…

【数学建模】逻辑回归算法(Logistic Resgression)

逻辑回归算法 简介逻辑回归与条件概率绘制sigmoid函数 简介 逻辑回归算法是一种简单但功能强大的二元线性分类算法。需要注意的是&#xff0c;尽管"逻辑回归"名字带有“回归”二字&#xff0c;但逻辑回归是一个分类算法&#xff0c;而不是回归算法。 我认为&#xff…

通达OA SQL注入漏洞【CVE-2023-4165】

通达OA SQL注入漏洞【CVE-2023-4165】 一、产品简介二、漏洞概述三、影响范围四、复现环境POC小龙POC检测工具: 五、修复建议 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损…

PHP最简单自定义自己的框架实现像TP链式sql语句(六)

1、实现效果&#xff0c;链式sql语句封装 order、where、group、limit等封装 2、数据表构造函数入参&#xff0c;ModelBase.php public $table NULL; public function __construct($table){$this->table$table;if(!$this->table){die("no table" );}$this-&…

C语言----输入scanf和输出printf详解

C语言编程中&#xff0c;输入输出是基本操作&#xff0c;printf和scanf并不是C语言中的唯一的输入输出选择&#xff0c;对于输入有scanf()、getchar()、getche()、getch()、gets()&#xff1b;对于输出有printf()、puts()、putchar()&#xff0c;他们各有自己的使用场景&#x…

C语言案例 阶乘求和-12

题目&#xff1a;求1 2&#xff01;3&#xff01; … 20&#xff01;的和。 程序分析 阶乘相关原理&#xff1a;一个正整数的阶乘是所有小于及等于该数的正整数的积&#xff0c;并且0的阶乘为1。自然数n的阶乘写作n!&#xff0c;任何大于1的自然数n阶乘表示方法&#xff1a;…

StarRocks入门部署

目录 一、StarRocks整体介绍 1.1、系统架构图&#xff1a; 1.2、FE相关 1.3、BE相关 1.4、数据管理特性 二、简单部署 2.1、部署前准备 2.2、手动部署 2.2.1、部署Leader FE节点 2.2.2、部署BE节点 2.2.3、关联FE、BE&#xff0c;搭建StarRocks集群 2.2.4、给root设…