代码编织梦想

Vue中嵌入html页面并相互通信

引言:由于最近工作中用到了大量的Iframe去集成一些只能通过原生html、css、js开发的功能接口,因此特意做一下过程记录的笔记。方便交流学习使用。

1. Vue中嵌入Html的方式

1.1 html的页面是单独的一个服务,有自己独立的端口地址

可以通过将src中修改需要展示的页面地址,这样做的好处是vue与iframe之间不需要通信,与后端的通信可以直接通过js发请求与后端进行交互。

<iframe src="http://127.0.0.1:8081/demo31.html"  width="100%" height="800px" scrolling="auto"></iframe>

1.2 html的页面是一个本地页面

嵌入的页面中的所有文件都是本地存在的,这种模式需要通过其他方式去交互,但是不需要将html写成一个单独的服务,直接集成到页面中就可以了。

注意:需要嵌入的页面应该放到public文件下面的static文件夹中,格式就如同下面例子中所示,如果不是这样的话会报错,具体原因不明。

 <iframe src="/static/gantt/test.html" ref="iframe" width="100%" height="900px" scrolling="no"></iframe>

2. Vue向html中传递数据

2.1 vue中的代码

在data中定义一个iframe绑定的页面的对象。

iframeWin: {}

在mounted中去绑定具体Iframe的页面

this.iframeWin = this.$refs.iframe.contentWindow;

发送信息给甘特图

sendIframeWinpMessage() {
	this.iframeWin.postMessage({
		params: "你想传的数据" /*在iframe页面中接收通过key也就是param接收,因此传输的数据可以是对象,包含多个key以及对应的数据*/
	}, "*");
},

2.2 html中的代码

在html中接收vue端传过来的值

window.addEventListener("message", function (event) {
  var data = event.data;
  console.log("从vue中获得的数据", data);
  // 定义一个变量去接收,然后就可以获得vue传过来的数据
  var test = data.params;
}, '*')

3. html向Vue中传递数据

由于vue可以向iframe页面中传值,同理iframe也可以向vue页面中传值,方式如下。

3.1 html页面中的代码

// 向vue中发送数据
window.parent.postMessage({
  params: "你想传输的值",
  cmd: "iframeOne" /*当有多个iframe页面传值时,可以设计通过其中的字段获取对应的值*/
},'*');

3.2 vue中的代码

在mounted中加载监听事件,并配上处理监听对象的方法。

window.addEventListener("message", this.handleMessage);

在method中定义方法,用于处理监听的事件。

handleMessage(event) {
 	// 获取从iframe页面中传过来的值
 	var cmd = event.data.cmd;
 	var params = event.data.params;
 }

4. 疑难杂症

4.1 标签页、弹窗展示

当用标签页,或者弹窗对iframe页面展示的时候,可能会出现值不展示的情况,这个时候需要在切换之前将mounted中绑定的方法再绑定一遍。

this.iframeWin = this.$refs.iframe.contentWindow;

4.2 html页面值刷新的问题

iframe与vue中监听数据传输的方法都是一直在监听的,当两边有数据发生变化时,相应的数据也会发生变化,页面的刷新可以采用reload等方式,或者重新加载,实时刷新的方式最好是通过iframe页面中的原生js去完成这个功能,在vue中通过监听事件的方式,会导致整个标签页面、弹窗刷新,达不到想要的效果。

vue组件通信全揭秘(共7课)_栀夏暖阳的博客-爱代码爱编程

什么是 Vue Vue 是尤雨溪一个人的项目,是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。 Vue 通过 Api

vue中iframe使用详解,结合postmessage实现跨域通信_艾欢欢的博客-爱代码爱编程

使用场景 需求:在一个H5项目的页面中以url的方式嵌入另一个项目的页面。(不得不使用iframe) 而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postM

vue.js组件通信精髓归纳(基础篇)-爱代码爱编程

前言 文章涉及的内容可能不全面,但量很多,需要慢慢看。我花了很长的时间整理,用心分享心得,希望对大家有所帮助。但是难免会有打字的错误或理解的错误点,希望发现的可以邮箱告诉我1163675970@qq.com,我会及时的进行修

vue面试题、react面试题大全、ES6等....-爱代码爱编程

自己整理的一些面试题: 1、promise是用来做什么的? 答:它是一个对象,用来传递异步操作的信息。 2、promise三个状态? Pending:进行中,Resolved:已完成,Reject:已失败 3、promise优缺点? 优点:可以通过.then解决回调地狱的问题,通过try-catch解决问题捕获

app怎么内嵌h5网页 app与内嵌h5网页(vue)交互传值-爱代码爱编程

公司项目要app内嵌我们前端的h5网页,故记录一些于此 app怎么内嵌h5网页   一、将前端项目提交部署至公司域名和网址 vue项目则打包后提交部署,可自己部署,也可后端帮忙部署,也可运营部署,看公司权限 二、app链上项目地址链接 app原生开发小伙伴链上你的项目地址链接即可(让他们链去) 三、开发阶段调试可以链上本机电脑的地址 htm

vue组件化可以调用html页面,vue组件(将页面公用的头部组件化)-爱代码爱编程

呃……重新捡起前面用vue-cli快速生成的项目。 之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component。 别问我为啥总是写关于vue的博客,都是为了生计(………………) 关于一些组件的概念之类的就不一一介绍了,官方文档说的很详细。 下面进入正题,直接下载项目 一 拿出之前的项目

详细总结流行前端框架Vue重难点概念-爱代码爱编程

详细总结流行前端框架Vue重难点概念 1 什么是Vue?2 Vue基本属性3 Vue基本指令4 组件化4.1 创建组件4.1.1 注册全局组件4.1.2 注册局部组件4.2 组件通信5 Vue底层原理5.1 虚拟DOM5.2 Vue运行流程5.3 生命周期钩子6 Vue-cli脚手架6.1 Webpack工具6.1.1 基本配置6.1.2 转换器L

前端vue面试总结,常见的,没有更全,只有更细,更新中-爱代码爱编程

1.Vue中为什么data(){}是个函数 因为组件是可以复用的Vue实例,一个组件被创建以后,就可能被多次利用,然而不管用了多少次,每个组件之间都应该相互独立,互不影响的。基于此Object是引用数据类型,如果不是function函数返回,那么每个组件的data都是存在同一个地址,一个数据改变那么也会影响其他数据。 JavaScript只有函数构成作用

vue笔记详解-爱代码爱编程

vue 文章目录 vue第一篇:邂逅vue为什么学习Vuejs?简单的认识一下Vue.jsVue.js安装Vue的初体验Vue中的MVVM创建Vue实例传入的optionsVue的生命周期第二篇:基础语法插值操作1.Mustache2.v-once3.v-html4.v-text5.v-pre6.v-clock绑定属性:1.v-bind介绍和使用

Vue iframe父子通信-爱代码爱编程

vue 组件嵌入iframe<!-- vue template--> <div> <iframe src="http://localhost:8081/" ref="iframe" frameborder="0"></iframe> </div> mounted() { window.

vue组件化开发、vue组件封装使用步骤、scoped实现组件的私有样式、vue组件通信、父传子、子传父、、-爱代码爱编程

vue组件化开发 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码 vue组件分类: 页面组件页面下的功能组件组件化开发 :一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能 ● 封装的思想,把页面上 可重用的部分 封装为 组件,从而方便项目的 开发 和 维护 一个页面, 可以拆分成一个个组件,一个组件就是一个整体,

vue组件_henrenzhengdere的博客-爱代码爱编程

Vue组件 一、学习目标 能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例 二、组件的概念,创建和使用 1. 为什么用组件 以前做过一个折叠面板 需求:现在想要多个收起

winform/wpf利用cefsharp集成vue开发_wpf vue-爱代码爱编程

原文发表在我的个人搭建的博客网站上:博客链接,下面是直接复制过来的 Winform/WPF集成vue开发 前言 有时候因为各种原因,可能在开发winform或wpf项目的时候需要嵌入web项目,而目前vue在web开发

uniapp中微信小程序和h5相互跳转及传参(webview)_uniapp 使用webview页面传参-爱代码爱编程

技术栈:uniapp-H5+uniapp-微信小程序(vue3+vite2+ts) 前言:在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,这两个端都是使用uniapp编写的,查资料后决定使用webview来嵌

我的vue 学习之路(上)-爱代码爱编程

需求:         1.VUE 目前是前端最流行的,它一定能最能满足当下业务需求的并且具有较高的先进性,所以要学习。         2.它作为工作在前线的前端开发的必备技能,无论是后端还是程序员都要了解一下(程序员会更知道如何更好的提供接口,项目经理也不会提无理的需求)         总之:作为IT从业人员,具有较好的学习是行业人

vue中 使用 iframe 嵌入本地 html 页面 并 相互通信_vue页面中嵌入本地html页面-爱代码爱编程

1. 使用 iframe 嵌入本地 HTML 页面 在 public 文件夹下新建 static 文件夹,然后将 html 文件及相关引用拷贝到 static 文件夹下。 <template> <

vue&freemarker_freemarker与vue-爱代码爱编程

java后端开发者做管理系统,用模版技术还是挺方便的。java后台使用freeMarker是通过Model,将值传给前端。并用来生成输出HTML网页。 但是如果在页面上对数据进行修改,怎么办呢?可以用jQuery选中各个do