【问题标题】:How to target Edge browser with javascript如何使用 javascript 定位 Edge 浏览器
【发布时间】:2015-10-21 15:53:03
【问题描述】:

我知道您应该尽可能进行功能检测,但是如果浏览器是 Microsoft Edge 浏览器,您能否在 Javascript 中检测?

我维护一个旧产品,我想显示一个警告,指出某些功能可能会被破坏,而无需花费大量时间来修复旧代码。

【问题讨论】:

  • 您担心 Edge 支持哪些功能?
  • 您可以使用用户代理嗅探,但个别浏览器检测是不好的做法。而是检测特征。
  • stackoverflow.com/questions/30591706/…,如前所述,代理嗅探是个坏主意。
  • 值得注意的是,全新的 Edge 已更改其用户代理,以反映它不再使用 Microsoft 引擎的事实。用户代理现在是:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36 Edg/80.0.361.109。但是,我认为没有必要对缺少的 e 进行额外检查,因为 Edge 现在基于 Chromium,并且从现在开始与 Google Chrome 基本相同 - 有效地消除了不兼容性。

标签: javascript browser-detection microsoft-edge


【解决方案1】:

尝试检测功能而不是特定浏览器。它更具前瞻性。您应该很少使用浏览器检测。

除此之外:一种选择是使用库(用户代理字符串有很多错综复杂的地方),或者手动解析window.navigator.userAgent

使用解析器库

# https://github.com/faisalman/ua-parser-js.

var parser = new UAParser();
var result = parser.getResult();

var name = result.browser.name;
var version = result.browser.version;

使用 Javascript 的原始方法

# Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) \
# Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136

window.navigator.userAgent.indexOf("Edge") > -1

【讨论】:

  • 请注意某些版本的 Edge 报告用户代理为 Edg(缺少最后一个“e”),无论出于何种原因。
  • Edg 适用于基于 Chromium 的新 Edge,应将其检测为 Chrome 以获得最大兼容性。
  • 不推荐使用 edge 版本 83
【解决方案2】:

这是检测 Edge 浏览器的简单脚本

if (/Edge/.test(navigator.userAgent)) {
    alert('Hello Microsoft User!');
}

解释:

/Edge/

用于搜索字符串“Edge”的正则表达式 - 然后我们针对“navigator.userAgent”属性进行测试

【讨论】:

  • 不推荐使用 edge 版本 83
  • @OmerCohen MS Edge Anaheim 基于 chromium 引擎,上面的代码是为 Edge legacy 编写的......
  • 是的,这适用于 ruby​​
  • 感谢也与 Trident 合作 :)
【解决方案3】:

useragent 字符串包含 Edge/12.9600,其中 12.9600 是我测试的版本号。这与 'Edge' 模式下 Internet Explorer 的用户代理字符串完全不同。

Edge 的用户代理字符串:

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

Edge模式下IE10的用户代理字符串:

Mozilla/5.0(Windows NT 6.3;WOW64;Trident/7.0;.NET4.0E;.NET4.0C;InfoPath.3;.NET CLR 3.5.30729;.NET CLR 2.0。 50727;.NET CLR 3.0.30729;Tablet PC 2.0;rv:11.0) 像 Gecko

因此,当使用 javascript 时,只需检查用户代理字符串中的单词“Edge”。当您还测试其他浏览器时,请务必先检查 Edge,否则您会得到误报(例如 Chrome 或 Safari...)

【讨论】:

    【解决方案4】:
    navigator.appVersion.indexOf('Edge') > -1
    

    【讨论】:

    • 您能解释一下它的工作原理以及它比其他解决方案更好的地方吗?
    • if (/Edge/.test(navigator.userAgent)) { var orientangle = "n/a!" } else {var orientangle = screen.orientation.angle}
    • 不推荐使用 edge 版本 83
    • 我将其称为“Edg”而不是“Edge”的较新版本navigator.appVersion.indexOf("Edg") > -1
    【解决方案5】:

    你并不孤单。在写这篇文章的时候,即使是谷歌分析也不能专门识别 Edge 浏览器。

    最好的办法是引用请求的用户代理,它会是这样的:

    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, 像壁虎)Chrome/42.0.2311.135 Safari/537.36 Edge/12.9600

    (要在 JavaScript 中从请求中提取用户代理,请参阅这篇文章:Getting the User Agent with JavaScript

    Edge 仅在 Windows 10 中可用,因此您可以利用这些知识来帮助确保您的逻辑是安全的。在 UA 中查找以下值:

    • Windows NT 10.0 - 告诉您用户使用的是 Windows 10)
    • Edge - 告诉你用户在 Edge 上

    当然,您也可以只查找Edge

    更新 - 05/08

    Google Analytics 现在已将 Windows 10 和 Edge 作为第一类维度,现在可以直接过滤这些维度。

    【讨论】:

    • Edge 版本 83 已弃用
    【解决方案6】:

    使用 javascript 进行浏览器检查

    IsChrome:window.navigator.userAgent.indexOf("Chrome") > -1;

    IsIE:window.navigator.userAgent.indexOf("MSIE ") > -1 || !!navigator.userAgent.match(/Trident.*rv\:11\./);

    IsEdge:window.navigator.userAgent.indexOf("Edge/") > -1;

    IsSafari:window.navigator.userAgent.indexOf("Safari") > -1 && window.navigator.userAgent.indexOf('Chrome') == -1;

    IsFirefox:window.navigator.userAgent.indexOf("Firefox") > -1;

    IsChromiumEdge:window.navigator.userAgent.indexOf("Edg/") > -1; // for new edge chromium

    【讨论】:

    • 不推荐使用 edge 版本 83
    【解决方案7】:

    我这里的 sn-p 也是从 SO 复制的,很抱歉我无法为您提供原始代码的参考,但我已对其进行了修改,所以这里是为寻找 sn-p 的人准备的检查 IE 11 和 MS Edge Window 10:

    var get_ie_version = function () {
        var sAgent = window.navigator.userAgent;
        var Idx = sAgent.indexOf("MSIE");
    
        // If IE, return version number.
        if (Idx > 0) {
            return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
        }
        // Condition Check IF IE 11 and or MS Edge
        else if ( !!navigator.userAgent.match(/Trident\/7\./)
            || window.navigator.userAgent.indexOf("Edge") > -1 )
        {
            return 11;
        } else {
            return 0; //It is not IE
        }
    };
    

    【讨论】:

    • 不推荐使用 edge 版本 83
    【解决方案8】:

    我觉得这是最好的方法,因为上面的方法有问题或不能正常工作。

    if (/Edg/.test(navigator.userAgent)) {
      alert("You are using Edge.");
    }
    

    (function getBrowser() {
      //checks for individual browsers
      let chromeCheck =
        /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
      let firefoxCheck = /Firefox/.test(navigator.userAgent);
      let ieCheck = /Edg/.test(navigator.userAgent);
    
      //if/else to check browsers against defined variables
      if (chromeCheck && !ieCheck) {
        isBrowser.textContent = `Yes. It's Chrome!`;
      } else if (firefoxCheck) {
        isBrowser.textContent = `No. This is Firefox.`;
      } else if (ieCheck) {
        isBrowser.textContent = `No. It's Edge.`;
      } else {
        isBrowser.textContent = `We have no clue!`;
      }
    })();
    Is it Chrome or something else? <span id="isBrowser"></span><br>
    (Open this link in Edge to verify)

    【讨论】:

      【解决方案9】:

      https://msdn.microsoft.com/en-us/library/ms537509%28v=vs.85%29.aspx

      试一试:

      function getInternetExplorerVersion()
      // Returns the version of Internet Explorer or a -1
      // (indicating the use of another browser).
      {
        var rv = -1; // Return value assumes failure.
        if (navigator.appName == 'Microsoft Internet Explorer')
        {
          var ua = navigator.userAgent;
          var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
          if (re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
        }
        return rv;
      }
      function checkVersion()
      {
        var msg = "You're not using Internet Explorer.";
        var ver = getInternetExplorerVersion();
      
        if ( ver > -1 )
        {
          if ( ver >= 8.0 ) 
            msg = "You're using a recent copy of Internet Explorer."
          else
            msg = "You should upgrade your copy of Internet Explorer.";
        }
        alert( msg );
      }
      

      Edge 或类似的东西替换字符串Microsoft Internet Explorer

      编辑: 您可以找出用户代理字符串是什么:

      alert(navigator.userAgent)
      

      【讨论】:

      • 这不会失败吗? Edge 的用户代理字符串如下所示,Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136。看不到 MSIE。 (stackoverflow.com/a/31279980/989920)
      • 但是 userAgent 字符串包含 Windows NT 10Edge/12.... 两者都可以用来获取浏览器信息
      • 确实如此。我更专注于 MSIE,我忘记了你可以使用不同的字符串来查找...
      • 不幸的是那不是我。除非出现严重问题,否则我不会投反对票。
      • 你很有帮助。尽管投反对票的人可能认为这个问题不应该有一个有助于浏览器嗅探的答案。我赞成反对反对票。
      【解决方案10】:

      Edge 版本 90 不会在 useragent 上显示 edg/ 部分。但是它显示了窗户和野生动物园。 Modern Safari 不能在 Windows 上运行,所以我做了这个验证,检查用户代理上的 windows 和 safari,它可以工作

      var isEdge = (function() {
        var agent = window.navigator.userAgent.toLowerCase();
        return agent.indexOf("windows") > -1 && agent.indexOf("safari") > -1
          ? true
          : false;
      })();
      

      【讨论】:

        【解决方案11】:

        这里的每个人似乎都在说同样的话,除了没有人提供可靠的 1 班轮解决方案。

        所以从这个答案来看,https://stackoverflow.com/a/32107845/584147

        简单地说,

        1. 这两种浏览器(IE 11 和 Edge)都使用“Netscape”的 navigator.appName(与使用“Microsoft Internet Explorer”作为 navigator.appName 的旧版 IE 相比)
        2. 在 IE 11 中,navigator.appVersion 显示为“三叉戟”,在 Edge 中,navigator.appVersion 没有显示为三叉戟

        我已经把它变成了一个简单的 1 班轮,供任何最终来到这里并需要它的人使用。

        var isieEdge = (navigator.appName == "Netscape") && (navigator.appVersion.indexOf('Trident') === -1); // IE Edge
        
        alert(isieEdge);
        

        【讨论】:

        • 有趣的是,我对 chrome 进行了不同的检查,这可能发生在这之前,所以我没有用这个测试跨浏览器。感谢您的提醒,也许当我有时间&当我回到那个项目时,我会考虑更新这个。
        • 我目前在生产中使用的检测码:stackoverflow.com/questions/21757105/…
        • 此代码未检测到任何浏览器。尝试其他浏览器的 appName,包括 2015 年推出的旧版本。
        猜你喜欢
        • 2022-01-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-06-21
        • 1970-01-01
        • 1970-01-01
        • 2016-01-14
        • 2021-09-15
        相关资源
        最近更新 更多