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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 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学习资料汇总与网址
2007/03/16 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
JS中关于正则的巧妙操作
2017/08/31 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
使用Python设计一个代码统计工具
2018/04/04 Python
django加载本地html的方法
2018/05/27 Python
pandas删除指定行详解
2019/04/04 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
普通院校学生的自荐信
2013/11/27 职场文书
社区矫正工作方案
2014/06/04 职场文书
项目合作意向书模板
2014/07/29 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
青涩记忆观后感
2015/06/18 职场文书
解析Java异步之call future
2021/06/14 Java/Android