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 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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,不用COM,生成excel文件
2006/10/09 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
ant design实现圈选功能
2019/12/17 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python对DICOM图像的读取方法详解
2017/07/17 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python 元组操作总结
2019/09/18 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python中包的用法及安装
2020/02/11 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
工作表扬信的范文
2014/01/10 职场文书
一份创业计划书范文
2014/02/08 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
文明生主要事迹
2014/05/25 职场文书
青奥会口号
2014/06/12 职场文书
老干部工作先进事迹
2014/08/17 职场文书
捐款感谢信
2015/01/20 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
python区块链持久化和命令行接口实现简版
2022/05/25 Python