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

發(fā)布時間：2020-09-14 23:37:52

來源：腳本之家

閱讀：207

作者：冷幽悠

在接入支付寶支付模塊的時候，支支返回的是一個form串，細看一下還有一個script標簽，如何將其渲染出來給大家分享一下經(jīng)驗。注意點：不能在當(dāng)前頁面追加任何元素例如原生js：innerHtml、appendChiled等等；Vue原生v-html也不可以因為其只能渲染html標簽，script不能夠識別。

需要重新創(chuàng)建一個空白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：評論區(qū)的兄弟給了個意見大家可以參考下：

要保證的是頁面上存在一個已有的盒子 const data = await this.payOrder()

document.getElementById('pay').innerHTML = data;//此處form就是后臺返回接收到的數(shù)據(jù) document.forms[0].submit()

以上這篇VUE渲染后端返回含有script標簽的html字符串示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

總結(jié)

以上是生活随笔為你收集整理的vue 如何解析原生html,VUE渲染后端返回含有script标签的html字符串示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。