uniapp处理后端返回的html字符串

发布于:2025-06-28 ⋅ 阅读:(18) ⋅ 点赞:(0)

前言:采用v-html方法处理

1.处理前

<html><head><meta http‐equiv="Content‐Type" content="text/html; charset=UTF-8"></head><body><form ↵<input type="submit" value="立刻提交" style="display:none" >↵</form>↵<script>document.forms[0].submit();</script></body></html>

2.处理后

<form <input type="submit" value="立刻提交" style="display:none" >↵</form>↵<script>document.forms[0].submit();<\/script>

3.跳转页面方法

//传参
uni.setStorageSync("ICBC_GW_V3_HTML",res.result.payUrl)
//跳转 
uni.navigateTo({
    url:"/subpages/cashier/webView"
			 })

4.被跳转页面

<template>
 <view v-html="htmlContent">
	 
 </view>
</template>

<script>
export default {
  data() {
    return {
     htmlContent:""
     
    }
  },
  onLoad(e) {
  	console.log(e)
    //获取参数
	const html=uni.getStorageSync("ICBC_GW_V3_HTML")
	console.log(html)
	this.htmlContent=this.processHtml(html)
	console.log(this.htmlContent)
  },
  mounted() {
    document.forms[0].submit();
  },
  methods: {
    //仅保留body里面的内容
    processHtml(html) {
     // 1. 提取标签内的内容
     const bodyMatch = html.match(/<body>([\s\S]*)<\/body>/i);
     if (!bodyMatch) return '';
     
     let bodyContent = bodyMatch[1];
     
     // 2. 转义标签,防止script中断
     bodyContent = bodyContent.replace(/<\/script>/g, '<\\/script>');
     
     return bodyContent;
   }
  }
};
</script>

<style>

</style>


网站公告

今日签到

点亮在社区的每一天
去签到