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.realSumbitUrlvar epccGwMsg = document.getElementById("epccGwMsg");epccGwMsg.value = data.params.epccGwMsgdocument.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;}

 

 

 

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

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

相关文章

C++类和对象(中)六个默认成员函数

&#x1f308;类的六个默认成员函数 任何一个类&#xff0c;不管是否为空&#xff0c;都会在生成的时候默认调用六个成员函数&#xff0c;这些成员函数可以自动生成&#xff0c;也可以由程序员写出。这六个默认成员函数分别是&#xff1a; 最主要的是前四个&#xff1a; 初始…

小红书论文刷新 SOTA:人体动作预测再升级,能精准到指尖

想象一下&#xff0c;你在玩一款 VR 游戏&#xff0c;准备伸手拿起一个虚拟杯子喝水。‍​​‌​‌​‎‎ 在传统的交互系统中&#xff0c;这通常需要你按下控制器上的特定按钮。但如果游戏集成了 EAI 框架&#xff0c;这一过程将变得无比自然。当你的手缓缓接近虚拟杯子时&…

初识C语言·文件操作

目录 1 关于文件 i)文件的基本知识 ii)数据文件的分类 2 文件打开和关闭 i)流和标准流 ii)文件指针 iii)文件打开和关闭 3 文件的顺序读写 i) fgetc fputc ii) fgets fputs iii) fscanf fprintf iv) fwrite fread 4 对比一组函数 scanf/fscanf/sscanf/printf/fpri…

Django视图函数技巧,从入门到实战

文章目录 Django视图函数1.request对象的方法2.视图函数的常用的返回对象&#xff08;1&#xff09;response对象&#xff08;2&#xff09;JsonResponse对象&#xff08;3&#xff09;redirect() &#xff1a;给浏览器了一个30x的状态码 3.设置响应头和状态码&#xff08;1&am…

springboot-前后端分离——第二篇

本篇主要介绍一个发送请求的工具—postman&#xff0c;然后对请求中的参数进行介绍&#xff0c;例如简单参数、实体参数、数组参数、集合参数、日期类型参数以及json类型参数&#xff0c;对这些参数接收进行总结。最后对响应数据进行介绍&#xff0c;使用统一响应结果返回浏览器…

01背包问题 动态规划

01背包问题 动态规划 01背包问题 动态规划写了点代码 C#实现程序运行结果代码和程序已经上传 01背包问题 动态规划 很有意思的问题。 写了点代码 C#实现 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Ta…

Oracle函数使用

ROW_NUMBER函数 ROW_NUMBER() OVER(PARTITION BY column1 ORDER BY column2 DESC) -- 根据column1分组按column2降序排序生成序号&#xff0c;序号由小到大,会生成一个唯一的序号 -- 例如column2中有两列值都为1,那他们的序号会有一个在上一个在下ROW_NUMBER() OVER(ORDER BY …

【数据结构】(三)树Tree

目录 1、基本概念 2、二叉树Binary Tree 3、树、森林与二叉树的转换 4、赫夫曼树Huffman Tree与赫夫曼编码Huffman Coding 1、基本概念 &#xff08;1&#xff09;树&#xff08;Tree&#xff09;是 n&#xff08;n ≥\geq 1&#xff09;个节点的有限集&#xff0c;n 0时称…

Android悬浮窗实现步骤

最近想做一个悬浮窗秒表的功能&#xff0c;所以看下悬浮窗具体的实现步骤 1、初识WindowManager 实现悬浮窗主要用到的是WindowManager SystemService(Context.WINDOW_SERVICE) public interface WindowManager extends ViewManager {... }WindowManager是接口类&#xff0c…

【CSS】css获取子元素的父元素,即通过子元素选择父元素(使用CSS伪类 :has() :not() )

这里写目录标题 一、:has获取第一个div获取包含 a.active 的 li获取第二个div 二、:not除了类名为active 的 a,其他的a的字体都为18px <div><h1>标题</h1></div><div><ul><li><a href"#" class"active">测…

k8s中调整Pod数量限制的方法

一、介绍 Kubernetes节点每个默认允许最多创建110个pod&#xff0c;有时可能由于主机配置扩容的问题&#xff0c;从而需要修改节点pod运行数量的限制。 即&#xff1a;需要调整Node节点的最大可运行Pod数量。 一般来说&#xff0c;只需要在kubelet启动命令中增加–max-pods参数…

大数据 - Hadoop系列《四》- MapReduce(分布式计算引擎)的核心思想

上一篇&#xff1a; 大数据 - Hadoop系列《三》- MapReduce&#xff08;分布式计算引擎&#xff09;概述-CSDN博客 目录 13.1 MapReduce实例进程 13.2 阶段组成 13.4 概述 13.4.1 &#x1f959;Map阶段&#xff08;映射&#xff09; 13.4.2 &#x1f959;Reduce阶段执行过…