uni-app web-view组件不解析HTML代码,直接显示代码到页面。

uni-app web-view组件不解析HTML代码,直接显示代码到页面。

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 windows11
HBuilderX 正式版
HBuilderX版本 3.3.1
手机系统 Android
手机版本 Android 12
手机厂商 小米
手机机型 Redme 9 pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

随机出现,目前没有掌握到规律,所以也不好复现。

预期结果:

正常解析HTML代码

实际结果:

直接显示HTML代码倒页面。

bug描述:

web-view标签随机出现显示源代码。

图片

3 回复

content-type错了吧


我新增修改content-type试试。

uni-app 中使用 web-view 组件时,web-view 组件本身是用来嵌入网页内容的,而不是用来解析和显示 HTML 代码的。如果你直接将 HTML 代码传递给 web-view,它会将代码作为纯文本显示,而不会解析为 HTML。

解决方案

如果你需要在 uni-app 中显示并解析 HTML 代码,可以使用以下几种方法:

1. 使用 rich-text 组件

uni-app 提供了 rich-text 组件,可以用来解析并显示 HTML 代码。

<template>
  <view>
    <rich-text :nodes="htmlContent"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>这是一个<strong>富文本</strong>内容。</p>'
    };
  }
};
</script>

2. 使用 web-view 加载本地或远程 HTML 文件

如果你确实需要使用 web-view,可以将 HTML 代码保存为一个 HTML 文件,然后通过 web-view 加载该文件。

<template>
  <view>
    <web-view src="/static/myHtmlFile.html"></web-view>
  </view>
</template>

或者加载远程的 HTML 文件:

<template>
  <view>
    <web-view src="https://example.com/myHtmlFile.html"></web-view>
  </view>
</template>

3. 使用 iframe 标签

在某些情况下,你也可以使用 iframe 标签来嵌入 HTML 内容。不过,uni-app 默认不支持 iframe,你可以通过自定义组件或插件来实现。

<template>
  <view>
    <iframe :src="htmlContent" frameborder="0"></iframe>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: 'data:text/html,<p>这是一个<strong>富文本</strong>内容。</p>'
    };
  }
};
</script>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!