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和firefox js关闭代码
Dec 11 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
js中typeof的用法汇总
Dec 12 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
详解tween.js的使用教程
Sep 14 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
js实现图片3D轮播效果
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
php数据类型判断函数有哪些
2013/09/23 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Python ljust rjust center输出
2008/09/06 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python3中的json模块使用详解
2018/05/05 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python字典的值可以修改吗
2020/06/29 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
乡镇安全生产目标责任书
2014/07/23 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
营销与策划实训报告
2014/11/05 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android