.NET MAUI WebView无法加载HTML引用的本地JS文件问题求助

针对你遇到的Android模拟器中WebView无法加载本地JS文件（报错Uncaught ReferenceError: OdysseyMap is not defined）的问题，以下是具体的解决步骤：

1. 确认本地资源的生成配置 #

确保所有JS、HTML文件的生成操作设置正确，否则文件不会被打包到Android应用中：

• 右键点击map.js及其他本地资源文件 → 选择「属性」
• 在「生成操作」下拉菜单中选择MauiAsset
• 「复制到输出目录」选择「如果较新则复制」
• 对index.html和其他相关资源文件重复上述操作

2. 修正HTML中的脚本引用路径 #

MAUI WebView加载本地资源时，需要适配其资源访问规则：

• 如果你直接使用ms-appx-web:///协议指定HTML路径（如ms-appx-web:///Resources/Raw/InteractiveMap/index.html），HTML内的相对路径（如./map/map.js）应该能正常解析，但需确保目录结构完全匹配：

  <!-- index.html中的脚本引用 -->
  <script src="./map/map.js"></script>
  

• 若相对路径仍失效，可尝试使用绝对资源路径：

  <script src="ms-appx-web:///Resources/Raw/InteractiveMap/map/map.js"></script>
  

3. 配置Android WebView的权限与设置 #

Android WebView默认限制了部分本地文件访问权限，需手动启用相关设置：
在页面的后台代码中添加WebView的Handler配置：

#if ANDROID
using Android.Webkit;
#endif

public MainPage()
{
    InitializeComponent();
    // 监听WebView的Handler完成初始化事件
    MyWebView.HandlerChanged += (sender, e) =>
    {
#if ANDROID
        if (MyWebView.Handler.PlatformView is Android.Webkit.WebView androidWebView)
        {
            var webSettings = androidWebView.Settings;
            // 启用JavaScript
            webSettings.JavaScriptEnabled = true;
            // 允许访问本地文件
            webSettings.AllowFileAccess = true;
            webSettings.AllowFileAccessFromFileURLs = true;
            webSettings.AllowUniversalAccessFromFileURLs = true;
        }
#endif
    };
}

对应的XAML中WebView的Source设置：

<WebView x:Name="MyWebView" 
         Source="ms-appx-web:///Resources/Raw/InteractiveMap/index.html" />

4. 验证文件是否存在 #

可以在代码中检查资源文件是否被正确打包，例如在Android平台下：

#if ANDROID
var assetManager = Android.App.Application.Context.Assets;
try
{
    using var stream = assetManager.Open("Resources/Raw/InteractiveMap/map/map.js");
    // 文件存在，正常加载
}
catch (System.IO.FileNotFoundException)
{
    // 文件未被打包，检查生成配置
}
#endif

完成上述配置后，重新部署到Android模拟器，WebView应该能正常加载本地JS文件并访问全局变量。

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