VUE渲染后端返回含有script标签的html字符串示例

在接入支付宝支付模块的时候,支支返回的是一个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字符串示例就是小编分

vue打开后端html文件,VUE渲染后端返回含有script标签的html字符串示例相关推荐

  1. vue 如何解析原生html,VUE渲染后端返回含有script标签的html字符串示例

    VUE渲染后端返回含有script标签的html字符串示例 发布时间:2020-09-14 23:37:52 来源:脚本之家 阅读:207 作者:冷幽悠 在接入支付宝支付模块的时候,支支返回的是一个f ...

  2. vue上传大文件/视频前后端(java)代码

    vue上传大文件/视频前后端(java)代码 一.上传组件 二.后端java代码 注意: 一.上传组件 <template><div><!-- 上传组件 -->&l ...

  3. Nuxt 项目引入外部Js的正确姿势 ,问题描述:打包构建之后引入的外部 js失效,构建之后的 .nuxt 文件夹下的js文件中,引入 js 的script标签凭空消失!

    首先先说我遇到的问题描述:       我是用vue + nuxt项目,项目中使用了阿里播放器,于是我在vue页面中直接引入了阿里播放器的 css和js文件,然后运行没有任何问题:如下图所示: 但是! ...

  4. vue打开后端html文件,vue中怎么请求后端数据?

    vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue 请求后台数据 需要引用vue-resource 安装 ...

  5. vue判断显示隐藏_web前端进阶之【Vue】10分钟掌握Vue 在学Vue的童鞋过来拿资料

    1.Vue官网 https://cn.vuejs.org 2.引入 通过script标签引入vue时最好放在head里,避免抖屏的情况. Tips:抖屏是指页面稍微大些,刷新页面会出现{{ }}的样式 ...

  6. html加载js文件失败,firefox/chrome动态设置script加载js文件失败

    firefox,chrome等w3c浏览器下面,设置script标签的src来动态加载js文件时,有2中情况 1)如果script标签已经加载过js文件,那么重新设置为其他js文件的路径时,无法加载这 ...

  7. spring boot + vue 前后端下载文件文件

    springboot返回文件两种方式 第一种写入流中返回 Response.setContentType(MIME)的作用是时客户端的浏览器区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程 ...

  8. vue自定义组件-文件上传后端接口

    学习目标: vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...

  9. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    原文:https://mp.weixin.qq.com/s/HWRYAR16vLE1XFep6_i1tA 松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的, ...

最新文章

  1. pear Auth的使用
  2. 阿里巴巴分布式服务框架 Dubbo 团队成员梁飞专访
  3. iOS学习之Runtime(二)
  4. 20165334 《java程序设计》第2周学习总结
  5. boost::mp11::mp_set_push_back相关用法的测试程序
  6. apache缺省banner_http服务器缺省banner
  7. Python 精简入门级学习(一)
  8. Windows API 进程状态信息函数
  9. react: code-split
  10. php服务器端注释,php标识和注释
  11. Nginx学习日记第五篇 -- upstream及fastcgi
  12. 文本分割器TXTSpliter
  13. 【FlexSim2019】仿真软件入门笔记:基本操作、快捷键、事件驱动、控制与程序
  14. c语言如何文件指针指向开头,fseek设置好文件指针 在C语言中fseek()的功能
  15. PNG格式的证件照怎么转成JPG格式?教你一招轻松转换
  16. 前字节程序员感叹“字节范”就是工作上不设边界,待遇上延迟满足。
  17. [ZT]一个三十岁男人的婚姻思考(三)
  18. Web大学生网页作业成品——易购商城网站设计与实现(HTML+CSS+JavaScript)
  19. 关于ListView的删除刷新列表
  20. 安装sentinel LDK 驱动

热门文章

  1. _beginthreadex返回NULL
  2. linux上的壁纸软件下载,Ubuntu 17.10上安装开源壁纸工具Wallch 4.0
  3. NPDP产品经理认证:产品营销组合的4P管理
  4. 【UE4】动画插入{角色移动、死亡}(混合空间,状态机)
  5. 计算机网络(第7版)谢希仁著 学习笔记
  6. Ubuntu将lib库加入到系统
  7. UEFI BIOS启动过程
  8. 为什么说HashMap是线程不安全的?
  9. ASP.NET 界面外观设计与布局
  10. 如何计划游戏开发项目