鸿蒙flutter_inappwebview_ohos.har如何去除广告及推广

在使用鸿蒙的flutter_inappwebview_ohos.har时，页面中总是出现广告和推广内容，非常影响用户体验。请问有没有办法可以去除或屏蔽这些广告？具体的实现方法是什么？是否需要修改配置或添加额外的代码？希望能得到详细的指导，谢谢！

2 回复

使用鸿蒙flutter_inappwebview_ohos.har去除广告及推广，可通过以下方法：

  1. 拦截广告域名：在WebView中设置拦截规则，屏蔽广告相关URL。
  2. 注入自定义CSS/JS：通过代码隐藏广告元素或阻止广告脚本加载。
  3. 使用内容过滤：结合第三方库或自定义逻辑过滤广告内容。 需注意遵守相关平台政策。

更多关于鸿蒙flutter_inappwebview_ohos.har如何去除广告及推广的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


针对鸿蒙平台上的 flutter_inappwebview_ohos.har 去除广告及推广，可以通过以下方法实现：

1. 拦截广告请求

在 WebView 中拦截广告域名请求，阻止广告资源加载：

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri("https://example.com")),
  onLoadResource: (controller, resource) async {
    String url = resource.url.toString();
    // 匹配广告域名（示例列表需自行补充）
    List<String> adDomains = ["ad.example.com", "doubleclick.net"];
    if (adDomains.any((domain) => url.contains(domain))) {
      controller.stopLoading(); // 阻止加载
    }
  },
)

2. 注入 CSS/JavaScript 隐藏广告元素

通过注入脚本隐藏广告容器：

InAppWebView(
  onLoadStop: (controller, url) async {
    // 注入 CSS 隐藏广告
    await controller.injectCSS(
      source: """
        .ad-class, [id*='ad'] {
          display: none !important;
        }
      """
    );
    // 或使用 JavaScript 移除元素
    await controller.evaluateJavascript(
      source: "document.querySelectorAll('.ad-class').forEach(el => el.remove());"
    );
  },
)

3. 使用广告拦截规则（需集成规则库）

集成开源广告拦截规则（如 EasyList）：

  • 将规则文件放入项目资产目录。
  • 在 WebView 初始化时加载规则，动态拦截请求或隐藏元素。

4. 注意事项

  • 域名列表维护：定期更新广告域名列表以适应广告变化。
  • 性能影响：频繁的请求拦截或 DOM 操作可能影响页面加载速度。
  • 法律合规：确保去除广告行为符合网站条款及法律法规。

推荐方案

结合 请求拦截 与 CSS/JS 注入，覆盖大部分广告场景。若需更高效拦截，可研究鸿蒙 WebView 的底层扩展能力，定制网络请求过滤逻辑。

通过以上方法，可显著减少 WebView 中的广告内容。

回到顶部