怎么使用 JavaScript 来识别不同的浏览器?

2023-07-1512:13:38WEB前端开发Comments920 views字数 3034阅读模式
怎么使用 JavaScript 来识别不同的浏览器?

在前端快速发展的今天, JavaScript 代码可以在不同的运行环境中执行。为了更好的适应各种运行环境,需要判断当前代码是在哪个运行环境中执行的,下面提供Vue是如何判断运行环境的:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51646.html

vue/src/core/util/env.js

在文件的第 6 行开始,代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51646.html

// Browser environment sniffing
export const inBrowser = typeof window !== 'undefined'
export const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
export const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE = UA && /msie|trident/.test(UA)
export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
export const isEdge = UA && UA.indexOf('edge/') > 0
export const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
export const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
export const isPhantomJS = UA && /phantomjs/.test(UA)
export const isFF = UA && UA.match(/firefox\/(\d+)/)

下面是一个使用 Peter-Paul Koch 的脚本检测用户的浏览器和版本:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51646.html

const BrowserDetect = {
    init: function () {
        this.browser =
            this.searchString(this.dataBrowser) || "An unknown browser";
        this.version =
            this.searchVersion(navigator.userAgent) ||
            this.searchVersion(navigator.appVersion) ||
            "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i = 0; i < data.length; i++) {
            const dataString = data[i].string;
            const dataProp = data[i].prop;
            this.versionSearchString =
                data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            } else if (dataProp) return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        const index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(
            dataString.substring(index + this.versionSearchString.length + 1)
        );
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome",
        },
        {
            string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb",
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version",
        },
        {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version",
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab",
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror",
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox",
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino",
        },
        {
            // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape",
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE",
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv",
        },
        {
            // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla",
        },
    ],
    dataOS: [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows",
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac",
        },
        {
            string: navigator.userAgent,
            subString: "iPhone",
            identity: "iPhone/iPod",
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux",
        },
    ],
};
BrowserDetect.init();

const browser = BrowserDetect.browser;
const version = BrowserDetect.version;
console.log(browser);
console.log(version);
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51646.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/51646.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定