HarmonyOS 鸿蒙Next三方包广告关闭解决方案

【问题背景】

• 如何关闭ArkWeb里个别服务商提供的全景图带有的横屏广告页

【原理刨析】

• ArkWeb为应用提供广告过滤功能，支持通过云端推送默认的easylist规则，或允许应用通过接口设定自定义规则文件。它在网络层拦截广告资源的下载，或在网页中注入CSS规则以隐藏特定的广告元素。
• 规则来源：支持两种规则配置方式，可单独或组合使用
  1. 云端推送的默认easylist规则；
  2. 开发者通过接口自定义的easylist规则文件。
• 过滤方式：从两个层面拦截广告
  1. 网络层：直接拦截广告资源的下载请求；
  2. 页面层：注入 CSS 规则，隐藏网页中特定的广告元素。
• 配置格式：统一采用easylist规则格式（行业通用广告过滤规则格式）。

【解决方案】

1、配置easylist规则文件，并开启广告过滤功能

• 示例如下：

  // xxx.ets
  import { webview } from '@kit.ArkWeb';
  import { picker, fileUri } from '@kit.CoreFileKit';
  
  // 演示点击按钮，通过filepicker打开一个easylist规则文件并设置到Web组件中
  @Entry
  @Component
  struct WebComponent {
    main_url: string = 'https://www.example.com';
    controller: webview.WebviewController = new webview.WebviewController();
  
    @State input_text: string = 'https://www.example.com';
  
    build() {
      Column() {
        Row() {
          Flex() {
            Button({type: ButtonType.Capsule}) {
              Text("setAdsBlockRules")
            }
            .onClick(() => {
              try {
                let documentSelectionOptions: ESObject = new picker.DocumentSelectOptions();
                let documentPicker: ESObject = new picker.DocumentViewPicker();
                documentPicker.select(documentSelectionOptions).then((documentSelectResult: ESObject) => {
                  if (documentSelectResult && documentSelectResult.length > 0) {
                    let fileRealPath = new fileUri.FileUri(documentSelectResult[0]);
                    console.info('DocumentViewPicker.select successfully, uri: ' + fileRealPath);
                    webview.AdsBlockManager.setAdsBlockRules(fileRealPath.path, true);
                  }
                })
              } catch (err) {
                console.error('DocumentViewPicker.select failed with err:' + err);
              }
            })
          }
        }
        Web({ src: this.main_url, controller: this.controller })
          .onControllerAttached(()=>{
            this.controller.enableAdsBlock(true);
          })
      }
    }
  }
  

2、使用AdsBlockManager的addAdsBlockDisallowedList()接口关闭特定域名页面的广告过滤

• 示例如下：

  // xxx.ets
  import { webview } from '@kit.ArkWeb';
  
  // 演示通过一个按钮的点击向Web组件设置广告过滤的域名策略
  @Entry
  @Component
  struct WebComponent {
    main_url: string = 'https://www.example.com';
    text_input_controller: TextInputController = new TextInputController();
    controller: webview.WebviewController = new webview.WebviewController();
  
    @State input_text: string = 'https://www.example.com';
  
    build() {
      Column() {
        Row() {
          Flex() {
            TextInput({ text: this.input_text, placeholder: this.main_url, controller: this.text_input_controller})
              .id("input_url")
              .height(40)
              .margin(5)
              .borderColor(Color.Blue)
              .onChange((value: string) => {
                this.input_text = value;
              })
  
            Button({type: ButtonType.Capsule}) { Text("Go") }
            .onClick(() => {
              this.controller.loadUrl(this.input_text);
            })
  
            Button({type: ButtonType.Capsule}) { Text("addAdsBlockDisallowedList") }
            .onClick(() => {
              let arrDomainSuffixes = new Array<string>();
              arrDomainSuffixes.push('example.com');
              arrDomainSuffixes.push('abcdefg.cn');
              webview.AdsBlockManager.addAdsBlockDisallowedList(arrDomainSuffixes);
            })
          }
        }
        Web({ src: this.main_url, controller: this.controller })
          .onControllerAttached(()=>{
            this.controller.enableAdsBlock(true);
          })
      }
    }
  }
  

关键接口汇总

相关文档： 

• 【官方指南_常用easylist语法规则】
• 【官方指南_管理Web组件的网络安全与隐私】