Vue中嵌入原生HTML页面

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

需求:b2b支付需要从后获取到数据放到form表单提交跳转,如下:

但是vue目前暂时没找到有类似功能相关文档,所以我采用iframe嵌套的方式

1. Vue中嵌入Html

复制代码
<iframe src="/static/gateway.html" ref="iframe" width="100%" height="120%" v-show="iframeShow"></iframe>

2. Vue向html中传递数据

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

复制代码
	iframeWin: {},

在mounted生命周期中去绑定具体Iframe的页面

复制代码
this.iframeWin = this.$refs.iframe.contentWindow;

发送信息到iframe页面

复制代码
sendIframeWinpMessage() {
				let _this = this;
				const data = {
					realSumbitUrl: _this.realSumbitUrl,
					epccGwMsg: _this.epccGwMsg
				}
				this.iframeWin.postMessage({
					/*在iframe页面中接收通过key也就是param接收,因此传输的数据可以是对象,包含多个key以及对应的数据*/
					params: data
				}, "*");
			},

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

复制代码
<script>
		window.addEventListener("message", function(event) {
			var data = event.data;
			// console.log("从vue中获得的数据", data);
			// 定义一个变量去接收,然后就可以获得vue传过来的数据
			// var obj = JSON.parse(data);
			// console.log(data.params.epccGwMsg)
			// console.log(data.params.realSumbitUrl)
			// JavaScript代码
			var realSumbitUrl = document.getElementById("realSumbitUrl");
			realSumbitUrl.value = data.params.realSumbitUrl
			var epccGwMsg = document.getElementById("epccGwMsg");
			epccGwMsg.value = data.params.epccGwMsg
			document.getElementById("form").submit();
		}, '*')
	</script>

3. html向Vue中传递数据

html页面中的代码

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

vue中的代码

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

复制代码
window.addEventListener("message", this.handleMessage);

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

复制代码
handleMessage(event) {
 	// 获取从iframe页面中传过来的值
 	var cmd = event.data.cmd;
 	var params = event.data.params;
 }
相关推荐
haaaaaaarry16 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin30 分钟前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿40 分钟前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong1 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字1 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木2 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts