webview_flutter加载含LaTeX的HTML时公式未渲染，脚本未加载求助

问题场景 #

使用webview_flutter: ^4.2.2渲染包含LaTeX公式的HTML字符串时，出现公式无法渲染的问题：单独运行HTML文件能正常解析并显示公式，但在WebView中仅显示原始LaTeX代码。推测核心原因是HTML中的MathJax相关JavaScript脚本未加载执行。

用户提供的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>
</head>
<body>
<p>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
</body>
</html>

核心原因 #

webview_flutter默认存在以下限制，导致外部JavaScript脚本无法正常加载执行：

1. JavaScript默认禁用：WebView出于安全考虑，默认不开启JavaScript支持，而MathJax完全依赖JS渲染LaTeX公式。
2. 内容安全策略（CSP）缺失：未配置合适的CSP规则时，WebView会阻止外部域名的脚本、样式资源加载。
3. 混合内容拦截：若加载的是本地HTML字符串，部分环境下可能拦截HTTPS外部资源（不过此案例中资源均为HTTPS，优先级低于前两点）。

解决方案 #

1. 开启JavaScript支持 #

在WebViewController的配置中明确启用JavaScript，这是解决问题的基础：

WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted) // 关键：开启JS
  ..loadHtmlString(yourHtmlContent);

2. 添加内容安全策略（CSP） #

在HTML的<head>中添加CSP meta标签，允许加载MathJax所需的外部资源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://polyfill.io https://cdn.jsdelivr.net; script-src 'self' https://polyfill.io https://cdn.jsdelivr.net 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';">

• script-src明确允许指定CDN的脚本，同时放开内联脚本和eval权限（MathJax渲染需要）
• style-src放开内联样式权限（MathJax生成的公式样式依赖）

3. 验证脚本加载状态（可选） #

添加JS回调确认MathJax是否加载完成，方便排查问题：
在HTML中添加：

<script>
  MathJax.startup.promise.then(() => {
    MathJaxChannel.postMessage('MathJax渲染完成');
  });
</script>

在Flutter中监听回调：

controller.addJavaScriptChannel(
  'MathJaxChannel',
  onMessageReceived: (JavaScriptMessage message) {
    print(message.message); // 控制台打印确认信息
  },
);

完整可运行示例 #

Flutter代码 #

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MathJaxPage extends StatefulWidget {
  const MathJaxPage({super.key});

  @override
  State<MathJaxPage> createState() => _MathJaxPageState();
}

class _MathJaxPageState extends State<MathJaxPage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    final htmlContent = '''
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://polyfill.io https://cdn.jsdelivr.net; script-src 'self' https://polyfill.io https://cdn.jsdelivr.net 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';">
  <title>MathJax Demo</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script>
    MathJax.startup.promise.then(() => {
      MathJaxChannel.postMessage('MathJax加载并渲染完成');
    });
  </script>
</head>
<body>
<p>
  When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are
  \\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]
</p>
</body>
</html>
''';

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'MathJaxChannel',
        onMessageReceived: (msg) => print(msg.message),
      )
      ..loadHtmlString(htmlContent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text(MathJax公式渲染测试)),
      body: WebViewWidget(controller: controller),
    );
  }
}

验证步骤 #

1. 确保pubspec.yaml中webview_flutter版本为^4.2.2
2. 复制上述代码到项目中运行
3. 查看控制台是否打印MathJax加载并渲染完成，同时检查页面是否正确显示公式

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