2024年Web前端最新Vue进阶（幺陆玖）信创终端适配改造_组件和插件怎么适应信创改造，CSS常用五类选择器

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

注⚠️：麒麟桌面操作系统自带麒麟安全浏览器标识为Kylinbrowser。

• 统信UOS自带浏览器：版本 6.0.7（正式版本） （64 位）| 93.0.4577.63（此浏览器基于Chromium开源项目及其他开源软件。）

----------------navigator.userAgent------------------ 
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 UOS

----------------navigator.platform------------------ 
Linux x86_64

由上述信息可知，可通过判断navigator.userAgent中的UOS统信浏桌面操作系统标识识别。

function isUOS(){
	if (navigator.userAgent.indexOf("UOS") > -1)
		return true; 
	else
		return false; 
}

• 操作系统：麒麟桌面操作系统
• 处理器：长城处理器
• 浏览器：奇安信可信浏览器专业版(V1.0.41904.7)

----------------navigator.userAgent------------------ 
Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.246 Safari/537.36 Qaxbrowser
----------------navigator.platform------------------ 
Linux aarch64

火狐

----------------navigator.userAgent------------------ 
Mozilla/5.0 (X11; Ubuntu; Linux aarch64; rv:78.0) Gecko/20100101 Firefox/78.0
----------------navigator.platform------------------ 
Linux aarch64

由上述信息可知，可通过判断navigator.userAgent中的Qaxbrowser奇安信浏览器标识识别。

function isQAX(){
	if (navigator.userAgent.indexOf("Qaxbrowser") > -1) 
		return true; 
	else
		return false; 
}

综上信息可知，判断终端为信创终端且浏览器为奇安信浏览器的识别逻辑如下：

function isXCandQAX(){
	if (navigator.userAgent.indexOf("Linux") > -1 && navigator.userAgent.indexOf("Qaxbrowser") > -1) 
		return true; 
	else
		return false; 
}

2.1 存在的问题

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

• 基于检测用户代理字符串agent string的浏览器识别是比较不可靠的，用户代理字符串是用户可配置的，navigator 数据可被浏览器使用者更改；
• 浏览器无法报告晚于浏览器发布的新操作系统；
• 在 Firefox 中，可以在 about:config 中更改首选项 general.useragent.override。一些火狐扩展是这样做的。但是，这只会更改发送并由navigator.userAgent返回的HTTP标头。可能还有其他方法利用 JavaScript 代码来识别浏览器。
• Opera 6+ 允许用户通过菜单设置浏览器标识字符串。
• Microsoft Internet Explorer使用Windows注册表。
• Safari 和 iCab 允许用户通过菜单将浏览器用户代理字符串更改为预定义的 Internet Explorer 或 Netscape 字符串。

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，故可以据此识别出 Opera。

例子：

if (window.opera) {...some action...}

另外，在 JavaScript 中，无法直接获取设备的 MAC 地址或 CPU 号等底层信息。这是因为浏览器和 Node.js 运行在操作系统提供的沙箱中，限制了对底层硬件的访问和操作。

如果需要获取设备的 MAC 地址或 CPU 号，可以通过在操作系统上运行本地程序或插件来获取，然后将信息传递给 JavaScript 应用。但是这种做法会引入安全风险，不建议在 web 应用中使用。

在一些特定场景下，可以使用浏览器提供的 WebRTC API，通过获取网络接口列表来获取设备的 MAC 地址。但是这种方法不是通用的，而且可能会受到一些限制。

2.2 方案优化

以上方案存在以下问题：

1. 在终端识别时，只可区分Windows与Linux操作系统类型，并不能识别CPU处理器（例如：Intel CORE i7）等硬件信息。故存在Linux非信创操作系统上运行奇安信信创浏览器无法识别的问题。

要解决以上问题，可借助平台类型+浏览器名称的方式进行确认，例如

function isXCandQAX(){
	if (navigator.userAgent.indexOf("Linux") > -1 && navigator.userAgent.indexOf("Qaxbrowser") > -1) 
		return true; 
	else
		return false; 
}

2.3 User-Agent 详解

User-Agent 是 Http 协议中的一部分，属于头域的组成部分，User Agent也简称UA。用较为简单来说，UA 是一种向目标访问网站提供你所使用的浏览器类型、操作系统及版本、CPU 类型、浏览器渲染引擎、浏览器语言、浏览器插件等信息的标识。UA 字符串在每次浏览器 HTTP 请求时都会发送到服务器。

浏览器 UA 字串的标准格式为：
浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识 版本信息

例如，信创终端奇安信浏览器的User-Agent：

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 UOS

• Mozilla/5.0 ：以前用于Netscape浏览器，目前大多数浏览器UA都会带有。
• X11; Linux x86_64：代表Linux系统。
• AppleWebKit/537.36：浏览器内核。
• KHTML：HTML排版引擎。
• like Gecko：这不是Geckeo 浏览器，但是运行起来像Geckeo浏览器。
• Chrome/93.0.4577.63：Chrome版本号。
• Safari/537.36：宣称自己是Safari。
• UOS: 统信桌面操作系统。

有关各字段的明细信息如下：
操作系统标识

FreeBSD

• X11; FreeBSD (version no.) i386
• X11; FreeBSD (version no.) AMD64

Linux

• X11; Linux ppc
• X11; Linux ppc64
• X11; Linux i686
• X11; Linux x86_64

Mac

• Macintosh; PPC Mac OS X
• Macintosh; Intel Mac OS X

Solaris

• X11; SunOS i86pc
• X11; SunOS sun4u

Windows

• Windows NT 6.1： 对应操作系统 windows 7
• Windows NT 6.0： 对应操作系统 windows vista
• Windows NT 5.2： 对应操作系统 windows 2003
• Windows NT 5.1： 对应操作系统 windows xp
• Windows NT 5.0 ： 对应操作系统 windows 2000

加密等级标识

• N: 表示无安全加密
• I: 表示弱安全加密
• U: 表示强安全加密

浏览器语言

在首选项 > 常规 > 语言中指定的语言

渲染引擎

浏览器 使用 Presto 渲染引擎，格式为： Presto/版本号

版本信息

显示 浏览器 真实版本信息，格式为： Version/版本号

首先，需要能够识别到当前系统用户所用操作系统类型。可应用如下方法实现：

### 最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

*   HTML5新特性，语义化

*   浏览器的标准模式和怪异模式

*   xhtml和html的区别

*   使用data-的好处

*   meta标签

*   canvas

*   HTML废弃的标签

*   IE6 bug，和一些定位写法

*   css js放置位置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

![](https://img-blog.csdnimg.cn/img_convert/64590c67cb47cd552a892ba710477f64.png)

*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/17fdfcb90fad04acc5e7273d1f853880.png)