如何在InAppWebView中从字符串加载HTML内容？

直接用InAppWebView提供的loadData或loadDataWithBaseURL方法就能快速实现，不需要额外复杂操作，以下是具体实现方案：

核心实现步骤 #

1. 基础场景：纯HTML字符串加载 #

如果你的HTML内容没有依赖外部相对路径资源（比如本地CSS、图片），直接用loadData方法加载即可。以Flutter环境为例：

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

// 在你的Widget中使用InAppWebView
InAppWebView(
  onWebViewCreated: (InAppWebViewController controller) async {
    // 假设htmlContent是你从网络请求获取到的HTML字符串
    String htmlContent = await fetchHtmlFromNetwork(); // 替换成你的网络请求逻辑
    
    // 加载HTML内容
    await controller.loadData(data: htmlContent);
  },
  // 若需JS交互，开启JavaScript支持
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
  ),
)

2. 进阶场景：含相对路径资源的HTML加载 #

如果HTML里引用了相对路径的资源（比如<link href="/styles.css">或<img src="/image.png">），需要用loadDataWithBaseURL指定资源的基础路径，确保资源能正确加载：

await controller.loadDataWithBaseURL(
  baseUrl: "https://your-api-domain.com/", // 替换为你的资源域名/基础路径
  data: htmlContent,
  mimeType: "text/html",
  encoding: Encoding.getByName("utf-8"),
);

关键注意事项 #

• 确保获取到的HTML字符串编码为UTF-8，避免出现乱码
• 尽量使用完整的HTML结构（包含<html>、<head>、<body>标签），减少渲染异常
• 如果HTML中有复杂的JS逻辑，可通过InAppWebViewController的API与原生代码做交互

内容的提问来源于stack exchange，提问作者Ohpleaseman