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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
使用JS实现简易计算器
Jun 14 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
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
用python绘制樱花树
2020/10/09 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
清洁工岗位职责
2014/01/29 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
单位接收函范文
2015/01/30 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
Java设计模式之代理模式
2022/04/22 Java/Android