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 相关文章推荐
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
vue.js todolist实现代码
Oct 29 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
微信小程序实现日历签到
Sep 21 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
Terran兵种对照表
2020/03/14 星际争霸
PHP在线书签系统分享
2016/01/04 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php中final关键字用法分析
2016/12/07 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python文件读取失败怎么处理
2020/06/23 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
满月酒主持词
2014/03/27 职场文书
12岁生日演讲稿
2014/05/14 职场文书
财务负责人任命书
2014/06/06 职场文书
校园标语大全
2014/06/19 职场文书
超市理货员岗位职责
2014/07/04 职场文书
鲁迅故居导游词
2015/02/05 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
python缺失值填充方法示例代码
2022/12/24 Python