HarmonyOS鸿蒙Next中js脚本加载失败

【修改建议】 针对本地HTML使用Hash路由，直接使用全路径跳转即可：

this.controller.loadUrl(this.controller.getOriginalUrl() + '# mobile-agreement'

需要使用resource协议加载本地资源，使用本地HTML文件的全路径。

【背景知识】 Hash路由跳转是前端路由实现的一种方式，利用URL中的哈希（#）部分进行页面导航。当哈希部分变化时，浏览器不会重新加载页面，而是通过JavaScript监听哈希变化来实现页面的跳转和内容的更新。

比如，下面这两串网址访问某服务器的时候，服务器都只会接收到 https://www.xxx.com/ 这一串地址请求，Hash值并不会通过网络请求发送给服务器：

上述两个地址网络请求Url是一样的，“#”号后的地址不会发送。

如仍无法解决问题请提供代码。

更多关于HarmonyOS鸿蒙Next中js脚本加载失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

引用路径不对吗？可以看看问题代码吗？

在HarmonyOS Next中，js脚本加载失败通常由以下原因导致：资源路径错误、文件未正确打包或权限配置问题。检查js文件是否位于entry/src/main/js目录下，路径引用需使用相对路径。确认模块依赖在module.json5中正确定义。排查网络请求限制或安全策略是否阻止加载。

在HarmonyOS Next中，Web组件加载本地HTML执行Hash路由跳转时JS脚本加载失败，通常由以下原因及解决方案：

文件路径配置问题
- 确保HTML及JS文件放置在src/main/resources/rawfile目录下
- 使用$rawfile()方法加载本地文件：
```
webView.load("file:///android_asset/" + $rawfile("index.html"));
```
路由模式兼容性
- Hash路由（#/page）在Web组件中需确保基础路径正确：
```
<base href="./" />
```
- 若使用Vue Router，需配置为Hash模式：
```
const router = new VueRouter({ mode: 'hash' })
```

JS执行时机问题

通过onPageEnd回调确保页面加载完成后执行脚本：

webView.onPageEnd(() => {
    webView.executeJavaScript("window.location.hash = '#/home'");
});

CSP安全策略限制

在HTML的<meta>标签中配置宽松策略（仅调试用）：

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'">

常见调试步骤
- 使用onConsole捕获错误信息：
```
webView.onConsole(consoleMsg => {
    console.error("WebView Log:", consoleMsg.message);
});
```
- 优先通过浏览器直接打开本地HTML文件验证JS功能正常

注意：若涉及系统API调用，需通过WebViewController的registerJavaScriptProxy注入接口。

如何解决Web组件加载本地HTML执行Hash路由跳转JS脚本失败问题