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重建星际争霸
Dec 22 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
vue 组件简介
Jul 31 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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操作csv文件代码实例汇总
2014/09/22 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
Openlayers实现图形绘制
2020/09/28 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python和ruby,我选谁?
2017/09/13 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
用Python实现数据的透视表的方法
2018/11/16 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python中str内置函数用法总结
2020/12/27 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
工作人员思想汇报
2014/01/09 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js