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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
bootstrap中的 form表单属性role="form"的作用详解
Jan 20 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 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
php5 图片验证码实现代码
2009/12/11 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
js 与或运算符 || && 妙用
2009/12/09 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Python中字符串List按照长度排序
2019/07/01 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
用Python 执行cmd命令
2020/12/18 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
大学生职业规划论文
2014/01/11 职场文书
项目投资意向书
2014/04/01 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
教师聘用意向书
2015/05/11 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python