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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
webpack入门+react环境配置
Feb 08 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
了解JavaScript中的选择器
May 24 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
javascript获取select值的方法完整实例
Jun 20 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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中的CMS的涵义
2007/03/11 PHP
php自动适应范围的分页代码
2008/08/05 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python中操作符重载用法分析
2016/04/29 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python实现多进程的四种方式
2019/02/22 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
对python 调用类属性的方法详解
2019/07/02 Python
python动态视频下载器的实现方法
2019/09/16 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
小学生环保倡议书
2014/05/15 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
教你使用TensorFlow2识别验证码
2021/06/11 Python