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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 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
重置版宣传动画
2020/04/09 魔兽争霸
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
实例浅析js的this
2016/12/11 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
让Vue也可以使用Redux的方法
2018/05/23 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
销售主管岗位职责
2014/02/08 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
感谢信格式范文
2015/01/22 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书