HarmonyOS鸿蒙Next中web组件如何拦截JS加载的字体文件

HarmonyOS鸿蒙Next中web组件如何拦截JS加载的字体文件 h5 加载的字体文件，在web组件拦截时，拦截不到

cke_197.png

cke_998.png


更多关于HarmonyOS鸿蒙Next中web组件如何拦截JS加载的字体文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

试试这个：

.onLoadIntercept((event) => {
// 返回true表示阻止此次加载，否则允许此次加载
let data = event.data;
let url = data.getRequestUrl();
console.log(`跳转url: ${url}`);

//拦截方法
if (url.startsWith('libs://')) {
  console.log(`命中拦截请求`);
  
  return true;
}

更多关于HarmonyOS鸿蒙Next中web组件如何拦截JS加载的字体文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


没拦截到，

是不是这个协议不会执行啊，如果是按钮的点击事件，这样的协议是没问题的，可以拦截到的。 要不你把这个字体的协议还写成https的，反正都是要拦截！，

已经解决啦，设置的是自定义协议 webview.WebviewController.customizeSchemes([{ schemeName: "libs", isSupportCORS: true, isSupportFetch: true }]);，

cke_134.png

正常的woff字体都会是一个http协议的链接地址。

你这libs是啥协议啊！

我这边有本地缓存资源，通过这个libs （自定义协议）来加载我本地缓存，

哦！ 原来文件在你本地啊！，

我用demo 复现过这个问题，这个字体文件在我没使用的情况下，字体路径其实是不加载的，这也就是拦截不到的原因，但是放到谷歌浏览器浏览器里面，这个字体路径可以加载，虽然报跨域

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17，

你好，参考 Web组件拦截能力的使用（该文档下面有具体实现demo）。

WebSchemeHandler 除支持onInterceptRequest的应用场景外，还支持：

下面使用 WebSchemeHandler 拦截，比如拦截自定义的协议：libs://

this.schemeHandler.onRequestStart((request: webview.WebSchemeHandlerRequest,
  resourceHandler: webview.WebResourceHandler) => {

  // ...
  return true;
})

this.controller.setWebSchemeHandler('libs', this.schemeHandler);

其他参考方案：HarmonyOS 网页的font标签，自定义协议出现跨域问题。

这个方法我也尝试过，拦截不到，

你把这网页放在谷歌浏览器里，抓一下字体的url是啥！

这一块我尝试过，抓不到的，实际地址应该是libs://XXXXXXX，

在HarmonyOS Next中，Web组件拦截JS加载的字体文件可以通过onInterceptRequest回调实现。该回调允许应用在Web组件发起网络请求时进行拦截和处理。当检测到请求的资源为字体文件（如.woff、.ttf等）时，可以在回调中返回自定义的响应数据或阻止请求。具体操作是判断请求URL的后缀或MIME类型，然后返回相应的WebResourceResponse对象。

在HarmonyOS Next的Web组件中，拦截由JavaScript动态加载的字体文件，关键在于正确使用onInterceptRequest回调并准确识别请求类型。

根据您提供的代码截图，当前拦截逻辑可能无法捕获字体请求，通常是因为：

  1. 请求类型匹配问题：字体文件请求可能不是通过标准URL加载，或请求头/类型未被正确识别。
  2. 加载时机问题：字体可能在页面初始加载后由JS动态插入，需要确保拦截器在此时仍有效。

核心解决方案如下：

  1. 在Web组件的onInterceptRequest回调中进行精准过滤：

    webview.onInterceptRequest((request: WebResourceRequest) => {
  let url = request.url;
  // 检查URL是否指向字体文件（常见字体格式）
  if (url.endsWith('.woff') || url.endsWith('.woff2') || url.endsWith('.ttf') || url.endsWith('.otf')) {
    // 执行你的拦截逻辑，例如：
    // 1. 阻止加载：return { intercept: true };
    // 2. 重定向到本地字体：return { intercept: true, redirectUrl: 'local/path/to/font.woff2' };
    return { intercept: true };
  }
  // 非字体请求，允许继续
  return { intercept: false };
})

  2. 扩展识别条件：除了检查文件后缀，更可靠的方法是检查网络请求的Content-Type响应头（如果可用），例如font/woff2。但请注意，在拦截请求的时刻，可能尚未收到响应头。因此，结合URL模式（如包含font或fonts的路径）和后缀名是更实用的方法。

  3. 确保拦截器设置时机：必须在Web组件加载目标H5页面之前（例如在aboutToAppear生命周期或加载URL之前）设置好onInterceptRequest回调，以确保能捕获到所有后续请求。

检查要点：

  • 确认你拦截的字体文件URL格式与H5页面中实际加载的完全一致。
  • 如果字体来自第三方域（如CDN），确保网络请求权限已配置。
  • 使用console.log输出拦截到的request.url，确认字体请求是否被触发以及URL的具体格式。

通过上述方法，你应该能够成功拦截并处理由JavaScript加载的字体文件。

回到顶部