[JavaScript知识库] BOM 判断浏览器的信息-Navigator

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> BOM 判断浏览器的信息-Navigator -> 正文阅读

[JavaScript知识库]BOM 判断浏览器的信息-Navigator

知识点;

BOM

浏览器对象模型，BOM可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象：

Window Navigator Location History Screen

Window对象代表整个浏览器窗口，同时window也是网页中的全局对象

Navigator 代表着当前浏览器的信息，通过该对象可以识别不同的浏览器

Location 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏

览器跳转页面

History 代表浏览器的历史记录，通过该对象操作浏览器的历史记录

????? 由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或后退翻页，而且该记录只能在当次访问时有效

Screen 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息

这些BOM对象在浏览器中都是作为window属性保存的，可以通过window对象来使用，也可以直接使用

appName（）返回浏览器的名称

alert（navigator.appName）；

由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们自会使用userAgent来判断浏览器的信息 userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容不同的浏览器会有不同的userAgent

检查浏览器的信息，详细代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
         Navigator
           由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们自会使用userAgent来判断浏览器的信息
            userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容不同的浏览器会有不同的userAgent

            如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
             比如：ActiveXObject是ie独有的
            
        */
        var ua = navigator.userAgent;//返回浏览器的信息
        console.log(ua);
        if (/chrome/i.test(ua)) {//通过正则表达式 i 忽略大小写判断字符串里是否含有chrome  test()检查ua里面有没有chorme
            alert("你是谷歌");
        } else if (/msie/i.test(ua)) {
            alert("你是IE");
        } else if ("ActiveXObject" in window) {
            alert("你是ie11");
        }

    </script>
</head>

<body>

</body>

</html>

结果：

当打开谷歌浏览器时：控制台输出浏览器信息字符串，并显示警示框alert