Web组件如何获取和设置UserAgent？

Question

Web组件如何获取和设置UserAgent

Answer 1

通过getUserAgent()接口可以获取默认用户代理，getCustomUserAgent()和setCustomUserAgent()接口可以获取和设置自定义用户代理。参考代码如下：

import { webview } from '@kit.ArkWeb'; 
@Entry 
@Component 
struct Index { 
  controller: webview.WebviewController = new webview.WebviewController(); 
  @State customUserAgent: string = ''; 
  @State userAgent: string = ''; 
 
  aboutToAppear(): void { 
    webview.once('webInited', () => { 
      try { 
        // 初始化完成时获取UserAgent。 
        // Mozilla/5.0 (Phone; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36  ArkWeb/4.1.6.1 Mobile 
        this.userAgent = this.controller.getUserAgent();   
      } catch (error) { 
        console.error(`get init UserAgent Error: ${JSON.stringify(error)}`); 
      } 
    }) 
  } 
 
  build() { 
    Column() { 
      Web({ src: 'www.example.com', controller: this.controller }) 
        .width('100%') 
        .layoutWeight(1) 
      Column({ space: 12 }) { 
        Text('自定义用户代理：' + this.customUserAgent) 
          .width('100%') 
          .margin({ top: 20 }) 
        Text('默认用户代理：' + this.userAgent) 
          .width('100%') 
        Button('设置自定义用户代理') 
          .onClick(() => { 
            try { 
              let userAgent = this.customUserAgent.length > 0 ? this.customUserAgent : this.userAgent; 
              this.controller.setCustomUserAgent(userAgent + ' test'); 
            } catch (error) { 
              console.error(`setCustomUserAgent Error: ${JSON.stringify(error)}`); 
            } 
          }) 
        Button('获取自定义用户代理') 
          .onClick(() => { 
            try { 
              this.customUserAgent = this.controller.getCustomUserAgent(); 
              console.log('getCustomUserAgent Success, userAgent: ' + this.userAgent); 
            } catch (error) { 
              console.error(`getCustomUserAgent Error: ${JSON.stringify(error)}`); 
            } 
          }) 
        Button('默认用户代理') 
          .onClick(() => { 
            try { 
              this.userAgent = this.controller.getUserAgent(); 
              console.log('getUserAgent Success, userAgent: ' + this.userAgent); 
            } catch (error) { 
              console.error(`getUserAgent Error: ${JSON.stringify(error)}`); 
            } 
          }) 
      } 
      .width('100%') 
    } 
    .width('100%') 
    .height('100%') 
  } 
}

参考链接

getUserAgent()

setCustomUserAgent()

getCustomUserAgent()

Answer 2

楼主，你好呀，看了一下你的问题，我觉得在Web组件中，可以通过navigator.userAgent属性来获取当前浏览器的UserAgent。UserAgent是一个字符串，它包含了当前浏览器的相关信息，使用Object.defineProperty方法来尝试设置UserAgent，但不是所有浏览器中都可能无效，因为UserAgent通常由浏览器自动设置，并且是只读的。在大多数情况下，浏览器不允许脚本修改

本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。