MAUI WebView中Markdig生成的文档内锚点链接跳转异常求助

问题背景 #

使用CommonMark/Markdig将Markdown转换为HTML，在MAUI WebView中遇到锚点跳转异常：

• Markdown锚点写法：[*Naming Fields*](#namingfields)
• 手动嵌入HTML设置锚点目标：<a name="namingfields"></a> 或 <a id="namingfields"></a>
• 转换代码：var result = Markdig.Markdown.ToHtml(text);
• 异常现象：调试环境下锚点跳转正常，MAUI应用运行时点击锚点会报错Can't reach the webpage at https://appdir/#namingfields，BaseUrl已设为空，WebView内HTML内容与调试器一致，但链接被错误重定向；将生成的HTML存为本地文件用浏览器打开时锚点功能正常，推测问题出在MAUI WebView控件的导航处理逻辑上。

无需嵌入HTML的锚点目标实现（Markdig原生支持） #

不用手动插入HTML标签，Markdig提供原生扩展实现锚点目标：

1. 标题自动生成锚点
   启用HeadingIdExtension后，Markdown中的标题会自动生成带id的HTML元素，直接对应锚点链接：

   // 构建带HeadingId扩展的转换管道
   var pipeline = new MarkdownPipelineBuilder()
       .UseHeadingId()
       .Build();
   // 转换Markdown到HTML
   var htmlResult = Markdig.Markdown.ToHtml(markdownText, pipeline);
   

   比如Markdown标题## Naming Fields会被转换为：

   <h2 id="namingfields">Naming Fields</h2>
   

   此时原锚点链接[*Naming Fields*](#namingfields)可直接跳转。

2. 自定义非标题锚点
   若需在段落或其他元素设置锚点，可使用Markdig的{#custom-id}语法，在目标内容末尾添加该标记即可：
   Markdown示例：

   这是一段需要设置锚点的文本{#custom-anchor}
   

   转换后的HTML：

   <p id="custom-anchor">这是一段需要设置锚点的文本</p>
   

   对应锚点链接写法：[跳转到自定义锚点](#custom-anchor)

MAUI WebView 锚点跳转问题修复 #

针对WebView错误重定向锚点的问题，可通过以下两种方式解决：

方式1：拦截导航事件，用JS实现锚点滚动 #

在WebView的Navigating事件中拦截锚点导航请求，取消默认行为后调用JavaScript滚动到目标锚点：

private async void MyWebView_Navigating(object sender, WebNavigatingEventArgs e)
{
    // 识别锚点链接（根据实际场景调整判断逻辑）
    var isAnchorLink = e.Url.Contains("#") && (e.Url.StartsWith("#") || e.Url.Contains("appdir/"));
    if (isAnchorLink)
    {
        e.Cancel = true;
        // 提取锚点ID
        var anchorId = e.Url.Split('#')[1];
        // 调用JS滚动到目标元素
        await ((WebView)sender).EvaluateJavaScriptAsync($"document.getElementById('{anchorId}')?.scrollIntoView({{behavior: 'smooth'}});");
    }
}

方式2：加载本地HTML文件替代直接加载HTML字符串 #

将Markdig生成的HTML保存为本地临时文件，让WebView加载本地文件路径，这样锚点跳转逻辑会和浏览器一致，避免被错误重定向：

// 生成HTML并保存到本地临时文件
var htmlContent = Markdig.Markdown.ToHtml(markdownText, pipeline);
var tempFilePath = Path.Combine(FileSystem.CacheDirectory, "temp_doc.html");
File.WriteAllText(tempFilePath, htmlContent);

// 设置WebView加载本地文件
MyWebView.Source = new UrlWebViewSource { Url = new Uri(tempFilePath).AbsoluteUri };

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