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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 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图片验证码制作实现分享(全)
2012/05/10 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python中abs&map&reduce简介
2018/02/20 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python实现密码强度校验
2020/03/18 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
师范生自荐信范文
2013/10/06 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
民政局个人整改措施
2014/09/24 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Python实现聚类K-means算法详解
2022/07/15 Python