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 相关文章推荐
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php Try Catch异常测试
2009/03/01 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js数组的操作指南
2014/12/28 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python numpy库np.percentile用法说明
2020/06/08 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
如何利用python生成MD5并去重
2020/12/07 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
为什么需要版本控制
2016/10/28 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
商场主管竞聘书
2014/03/31 职场文书
大学生村官考核材料
2014/05/23 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS