非vue子页面 调用vue父页面方法

由于要使用之前项目使用的页面,需要从非vue iframe子页面调用vue项目
1.父页面

  <iframe :src="value.urlPath" frameborder="0" width="900px" height="500px"></iframe>methods: {add(type,name,url){//console.log("父页面方法实现");},	handleMessage (event) {const data = event.data.data;if(data !== undefined){if(data.code === "success"){console.log("子页面传来------")console.log(data.data);this.add(data.data.type,data.data.name,data.data.url);}}},},mounted() {window.addEventListener('message', this.handleMessage);},

子页面

        <button onclick="addstruct()">添加快捷项</button><script>function addstruct(){console.log("点击");// 向父vue页面发送信息window.parent.postMessage({data: {code:"success",data:{type:'0',name:'百度',url:'https://www.baidu.com/s?wd=abc'}}}, '*');}</script>

这样就可以实现非vue子页面调用vue父页面方法

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

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

相关文章

SpringBoot 指定静态资源路径

可单独指定Mapping&#xff0c;不动用default配置。 1.配置类代码实现&#xff08;常见&#xff09; 低版本 Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter {Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) { …

如何成为一个很厉害的工程师

有很多人&#xff0c;包括我也困惑的一个问题&#xff0c;就是如何成为一个很厉害的工程师。类似的问题也有很多&#xff0c;如何成为一个很厉害的运营&#xff0c;如何成为一个很厉害的产品&#xff0c;或者跨行业的&#xff0c;如何成为一个很厉害的医生&#xff0c;如何成为…

“崩溃!我再也不搞 AI 了”谷歌 AI 专家:别让你的方法打败你!

今天&#xff0c;想跟大家聊聊 Python 人工智能。最近几年&#xff0c;我看过市面上很多 Python和人工智能的教程&#xff0c;基本都是先介绍Python基本语法、dict、tuple 等基本库的使用&#xff0c;最后学习机器学习、深度学习的常用算法......但我与 Google 人工智能开发专家…

解决jodconverter 2.2.1 版本不支持docx、xlsx、pptx 转换成PDF格式异常

文章目录一、基础对比1.版本对比2.异常现象二、分析定位2.1. 找异常输出处2.2. 找异常源头2.3. api源头三、实现流程3.1. 思路3.2. 新建包重写类3.3. 完整类一、基础对比 1.版本对比 03版本office07版本及高版本office.doc.docx.xls.xlsx.ppt.pptx 2.异常现象 搭建好 Spring…

突破边界局限,阿里云神龙负责人张献涛分享15年虚拟化之路

2020年1月8日&#xff0c;弹性计算服务技术总负责人张献涛受邀出席“面对面 见未来”的沙龙分享活动&#xff0c;现场听众主要是银行、保险、证券等金融行业的CTO、CIO等。 演讲开始前&#xff0c;听众们了解神龙云服务器的并不多。在听完张献涛的介绍后&#xff0c;他们对神龙…

vue Draggable实现拖动改变顺序

npm install vuedraggable import draggable from vuedraggable 示例代码 Test.vue <template><ul class"sort-ul"><div>45454</div><draggable group"article" :value"sortArr" input"handleListChange(…

Tablestore入门手册-UpdateRow接口详解

表格存储Tablestore入门手册系列主要介绍表格存储的各个功能接口和适用场景&#xff0c;帮助客户了解和使用表格存储Tablestore。本文对表格存储Tablestore的UpdateRow接口进行介绍&#xff0c;包括其参数、功能示例、使用场景等。 接口概述 UpdateRow接口是表格存储Tablestor…

echarts 中 symbol 自定义图片

在官方文档里面&#xff0c;修改标记的图形&#xff08;symbol&#xff09;的方法有三种&#xff1a; 一&#xff1a;ECharts 提供的标记类型有 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’&#xff1b;例&#xff1a;sym…

给力!一行代码躺赚普通程序员10年薪资!

笔者这两天闲逛知乎&#xff0c;看到了这个帖子&#xff1a;匿名答题&#xff0c;发表于2014年&#xff0c;此外没有留下任何多余信息。2年躺赚200万&#xff0c;相当于普通程序员10年的工资。没想到Pyhon这么强大&#xff0c;怪不得有人说“除了不会生孩子&#xff0c;Python什…

支付宝移动端 Hybrid 解决方案探索与实践

目前 mPaaS H5 容器 Demo 源码已发布至 GitHub&#xff0c;全新的接入方式让你可以一键集成 mPaaS 环境并快速接入 H5 容器&#xff0c;体验统一的容器和内核&#xff0c;获取媲美原生的 Hybrid 方案及完美的动态能力。 支付宝 Hybrid 方案建设与演进 目前支付宝有 2 套 Hybr…

SpringBoot 整合 knife4j

文章目录简述2. 导入依赖3. 创建配置类4. 创建User实体类5. 创建开发接口6. 启动项目简述 Swagger是一款测试文档Api接口&#xff0c;具体用法见SpringBoot整合Swagger。而knife4j是对Swagger进一步封装&#xff0c;其优化了api文档的界面。官网https://doc.xiaominfo.com/kni…

如何将数据仓库从 AWS Redshift 迁移到阿里云 AnalyticDB for PostgreSQL

阿里云AnalyticDB for PostgreSQL&#xff08;以下简称 ADB PG&#xff0c;即原HybridDB for PostgreSQL&#xff09;为基于PostgreSQL内核的MPP架构的实时数据仓库服务&#xff0c;可以支持复杂ETL任务&#xff0c;也支持高性能在线查询&#xff0c;同阿里云生态紧密结合。AWS…

开源项目如何挣钱? Spark 商业化公司创始人曝光心路历程

众所周知&#xff0c;开源项目对软件发展来说至关重要&#xff0c;但仍有人认为用开源项目来赚钱是对开源项目的一种亵渎。HashiCorp联合创始人兼 CTO Armon Dadgar、Databricks CEO Ali Ghodsi 和 a16z 的普通合伙人 Peter Levine 齐聚一堂&#xff0c;详细阐述开源项目变成商…

F1 Query: Declarative Querying at Scale

距离 Google 的上一篇 F1 论文&#xff0c;也就是 F1: A Distributed SQL Database That Scales 已经 5 年过去了&#xff0c;Google 在今年的 VLDB 上终于发布了 F1 的新版本 F1 Query: Declarative Querying at Scale&#xff0c;我们今天就来看一下这篇论文。 2013 年的 F1…

openoffice 安装windows 环境

文章目录一、安装配置启动1. 下载软件2. 安装3. 启动一、安装配置启动 1. 下载软件 https://www.openoffice.org/download/ 4.1.11版本 下载链接 2. 安装 一路下一步安装即可 安装完毕后&#xff0c;在桌面上会有一个openoffice图标 3. 启动 soffice -headless -accept“…

在线看大会!就来云栖号!

背景 抗击2019新型冠状病毒&#xff08;2019-nCoV冠状病毒&#xff09;成了全国人民的头等大事。截至2020年2月7日&#xff0c;中国确诊新型冠状病毒感染者逾3万人。为抗击预防新型冠状病毒&#xff0c;武汉采取封城措施&#xff0c;钟南山院士提倡全家在家不出门隔断病源&…

我为什么放弃Java,却选择Python?

不可否认的是&#xff0c;Python 凭借超广泛的应用方向&#xff0c;已成为了最受欢迎的编程语言。不过&#xff0c;真正让我喜欢上 Python 的原因&#xff0c;是我发现做同样功能的代码&#xff0c;从 Java 换成 Python 以后&#xff0c;代码量直接从 2000 行减少到 200 行。甚…

三大场景,对象存储OSS带你快速上云

本文介绍对象存储OSS的主要应用场景。 图片和音视频等应用的海量存储 OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。 网页或者移动应用的静态和动态资源分离 利用海…

word、excel、ppt 办公文件 在线预览

如果想要免费的&#xff0c;可以用 openoffice&#xff0c;实现原理就是&#xff1a; 通过第三方工具openoffice&#xff0c;将word、excel、ppt、txt等文件转换为pdf文件流&#xff1b;当然如果装了Adobe Reader XI&#xff0c;那把pdf直接拖到浏览器页面就可以直接打开预览&a…

云解析DNS能为你做什么?

记录类型 云解析DNS支持A、CNAME、MX、TXT、SRV、AAAA、NS、CAA记录类型。 您可以参阅 添加解析记录 操作文档。 记录类型功能描述AIPV4记录&#xff0c;支持将域名映射到IPv4地址使用AAAAIPV6记录&#xff0c;支持将域名映射到IPv6地址使用CNAME别名记录&#xff0c;支持将域…