前端开发如何检测手机鸿蒙Next系统？

闪电狮

已于 2024-12-17 14:03:38 修改

阅读量875

点赞数 5

文章标签：前端 html5 javascript

于 2024-12-17 13:59:18 首次发布

本文链接：https://blog.youkuaiyun.com/asphalt_9/article/details/144533738

版权

首先，鸿蒙Next用的是Chrome内核（和鸿蒙4.2是一样的，网页本身没有兼容性问题）

但有些活动可能希望屏蔽鸿蒙Next

比如您希望在活动页面中检测鸿蒙Next系统，并且提示“本活动还不支持鸿蒙Next系统，请找您用安卓手机的朋友帮忙参与活动”

我们先看看鸿蒙Next的User-Agent是什么？（检测代码在文章结尾）

鸿蒙Next系统浏览器

Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile HuaweiBrowser/5.0.6.302

鸿蒙Next 原生微博App内置WebView

Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile Weibo (HUAWEI-PLR-AL00__weibo__1.11.0__harmony__hmOpenHarmony-5.0.1.110)

鸿蒙Next 原生豆瓣App内置WebView

Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile com.douban.frodo.hap/7.8.0(7800000) com.douban.frodo/7.89.0 udid/60f986f486e3a08b3a01b0d2bb20a1b907a8cbbd

鸿蒙Next原生知乎App内置WebView

ZhihuHybrid com.zhihu.hmos/ZhihuHmos/10.15.0 Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile

可以观察到

平台标识 OpenHarmony 的加入

• 这些 User-Agent 字符串中都包含了 OpenHarmony，例如：

• Mozilla/5.0 (Phone; OpenHarmony 5.0)

ArkWeb 引擎标识

• 这些 User-Agent 中包含了 ArkWeb/4.1.6.1，例如：

• Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1

那么，我们可以编写检测代码

function isHarmonyNext() {
  const userAgent = navigator.userAgent;

  // 检测 User-Agent 中是否包含 OpenHarmony 和 ArkWeb
  const isOpenHarmony = userAgent.includes("OpenHarmony");
  const isArkWeb = userAgent.includes("ArkWeb");

  // 返回检测结果
  return isOpenHarmony && isArkWeb;
}

// 示例调用
if (isHarmonyNext()) {
  console.log("当前浏览器为 OpenHarmony 平台且基于 ArkWeb 内核。");
} else {
  console.log("当前浏览器不是 OpenHarmony 平台或未基于 ArkWeb 内核。");
}

您可以这样测试

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>OpenHarmony 检测</title>
</head>
<body>
  <script>
    function isHarmonyNext() {
      const userAgent = navigator.userAgent;
      const isOpenHarmony = userAgent.includes("OpenHarmony");
      const isArkWeb = userAgent.includes("ArkWeb");
      return isOpenHarmony && isArkWeb;
    }

    if (isHarmonyNext()) {
      document.body.innerHTML = "<h1>当前浏览器为 OpenHarmony 平台且基于 ArkWeb 内核。</h1>";
    } else {
      document.body.innerHTML = "<h1>当前浏览器不是 OpenHarmony 平台或未基于 ArkWeb 内核。</h1>";
    }
  </script>
</body>
</html>