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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
小程序实现带年月选取效果的日历
Jun 27 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
js时间控件只显示年月
2017/01/08 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
python基础教程之缩进介绍
2014/08/29 Python
Python中的super()方法使用简介
2015/08/14 Python
python实现批量监控网站
2016/09/09 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python持续监听文件变化代码实例
2020/07/22 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
房产授权委托书范本
2014/09/22 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
讲座通知范文
2015/04/23 职场文书
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers