VUE渲染后端返回含有script标签的html字符串示例


Posted in Javascript onOctober 28, 2019

在接入支付宝支付模块的时候,支支返回的是一个form串,细看一下还有一个script标签,如何将其渲染出来给大家分享一下经验。注意点:不能在当前页面追加任何元素例如原生js:innerHtml、appendChiled等等;Vue原生v-html也不可以因为其只能渲染html标签,script不能够识别。

需要重新创建一个空白Vue组件,用router进行传参,传参方式(新窗口打开)

let routeData = this.$router.resolve({ path: 'Recharge', query: { htmls: resp.data.dataObj }});
window.open(routeData.href, '_blank');

解析方式

const div = document.createElement('div');
div.innerHTML = this.$route.query.htmls;
document.body.appendChild(div);
document.forms[0].submit();

(PS:评论区的兄弟给了个意见大家可以参考下:

要保证的是页面上存在一个已有的盒子 const data = await this.payOrder()

document.getElementById('pay').innerHTML = data;//此处form就是后台返回接收到的数据 document.forms[0].submit()

以上这篇VUE渲染后端返回含有script标签的html字符串示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
理解javascript中的with关键字
Feb 15 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue组件tabbar使用方法详解
Nov 06 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 #Javascript
vue 实现input表单元素的disabled示例
Oct 28 #Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
VUE解决 v-html不能触发点击事件的问题
Oct 28 #Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 #Javascript
vue动态禁用控件绑定disable的例子
Oct 28 #Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python3基础之函数用法
2014/08/13 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
应届生会计求职信
2013/11/11 职场文书
社区母亲节活动方案
2014/03/05 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
学校校庆演讲稿
2014/05/22 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
php修改word的实例方法
2021/11/17 PHP
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js