js 判断浏览器类型|极客笔记

js 判断浏览器类型

在Web开发中，有时候我们需要针对不同的浏览器类型进行不同的处理，例如为不同的浏览器加载不同的样式或功能。本文将详细介绍如何使用JavaScript来判断浏览器类型，并根据判断结果进行相应的处理。

1. userAgent 属性

在JavaScript中，可以通过navigator.userAgent属性来获取用户代理（user agent）字符串，该字符串包含了浏览器类型和版本等信息。通过解析这个字符串，我们可以判断当前使用的浏览器类型。

const userAgent = navigator.userAgent;
console.log(userAgent);

运行上述代码，可以在控制台看到当前浏览器的user agent字符串，例如：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

2. 判断浏览器类型

2.1 判断IE浏览器

IE浏览器的user agent中包含MSIE或Trident关键字，我们可以通过这两个关键字来判断是否为IE浏览器。

function isIE() {
    const userAgent = navigator.userAgent;
    return userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('Trident') !== -1;
}

if (isIE()) {
    console.log('当前浏览器为IE');
} else {
    console.log('当前浏览器不是IE');
}

2.2 判断Edge浏览器

Edge浏览器的user agent中包含Edg关键字，我们可以通过这个关键字来判断是否为Edge浏览器。

function isEdge() {
    const userAgent = navigator.userAgent;
    return userAgent.indexOf('Edg') !== -1;
}

if (isEdge()) {
    console.log('当前浏览器为Edge');
} else {
    console.log('当前浏览器不是Edge');
}

2.3 判断Chrome浏览器

Chrome浏览器的user agent中包含Chrome关键字，我们可以通过这个关键字来判断是否为Chrome浏览器。

function isChrome() {
    const userAgent = navigator.userAgent;
    return userAgent.indexOf('Chrome') !== -1;
}

if (isChrome()) {
    console.log('当前浏览器为Chrome');
} else {
    console.log('当前浏览器不是Chrome');
}

2.4 判断Firefox浏览器

Firefox浏览器的user agent中包含Firefox关键字，我们可以通过这个关键字来判断是否为Firefox浏览器。

function isFirefox() {
    const userAgent = navigator.userAgent;
    return userAgent.indexOf('Firefox') !== -1;
}

if (isFirefox()) {
    console.log('当前浏览器为Firefox');
} else {
    console.log('当前浏览器不是Firefox');
}

2.5 判断Safari浏览器

Safari浏览器的user agent中包含Safari关键字，我们可以通过这个关键字来判断是否为Safari浏览器。需要注意的是，Chrome浏览器的user agent中也包含Safari关键字，因此在判断Safari浏览器时需要排除Chrome浏览器。

function isSafari() {
    const userAgent = navigator.userAgent;
    return userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Chrome') === -1;
}

if (isSafari()) {
    console.log('当前浏览器为Safari');
} else {
    console.log('当前浏览器不是Safari');
}

2.6 判断Opera浏览器

Opera浏览器的user agent中包含OPR关键字，我们可以通过这个关键字来判断是否为Opera浏览器。

function isOpera() {
    const userAgent = navigator.userAgent;
    return userAgent.indexOf('OPR') !== -1;
}

if (isOpera()) {
    console.log('当前浏览器为Opera');
} else {
    console.log('当前浏览器不是Opera');
}