如何使用javascript针对Edge浏览器进行目标定向

48

我知道在可能的情况下应该进行特性检测,但是你能否在JavaScript中检测浏览器是否为Microsoft Edge浏览器?

我维护一个旧产品,我想显示一个警告,指出一些功能可能会出现问题,而不必花费大量时间修复旧代码。


你关心Edge支持哪些功能? - Claies
3
可以使用用户代理嗅探,但是单独检测浏览器是不好的做法。相反,应该检测功能(features)。 - evolutionxbox
例如,旧版本的Tibico General Interface(JSX30.js)不支持Edge浏览器。因此,解决方法是识别浏览器非常重要。修补旧的JSX版本非常昂贵(时间),更新(假设新版本有效)非常、非常昂贵(时间)。 - Joel Peltonen
可能是重复的问题:使用JavaScript检测Microsoft Edge或Spartan - Joel Peltonen
1
需要注意的是,全新的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相同-有效消除了不兼容性。 - Theikon
显示剩余4条评论
11个回答

60

尽量检测特征,而不是特定的浏览器。这样更具未来性。只有在极少数情况下才应该使用浏览器检测。

说到这里:一种选择是使用库(用户代理字符串有许多复杂性),或手动解析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/107.0.0.0 Safari/537.36 Edg/107.0.1418.26

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

3
注意,某些版本的 Edge 浏览器将用户代理报告为 Edg(缺少最后一个“e”),出于不知何故的原因。 - chesscov77
8
Edg是基于Chromium的新版Edge浏览器,为了最大兼容性,应将其识别为Chrome。 - Andy1210
对于 Edge 浏览器版本 83,已被弃用。 - Omer Cohen

29

这是一个简单的脚本,用于检测Edge浏览器

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

解释:

/Edge/
通过正则表达式搜索字符串“Edge”,然后将其与“navigator.userAgent”属性进行测试。

1
对于 Edge 版本 83,已被弃用。 - Omer Cohen
@OmerCohen MS Edge Anaheim基于chromium引擎,上述代码是针对Edge旧版编写的... - Manoj Kadolkar
是的,如果用户使用 Ruby < 2.5.0 并且被困在 Browser gem 中,这个方法可以解决问题。 - gangothri
1
感谢,它也适用于Trident :) - human
2023: /Edg/.test(navigator.userAgent) - John Berg

7
用户代理字符串包含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
IE10在Edge模式下的用户代理字符串如下:
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) like Gecko
所以,在使用JavaScript时,只需在用户代理字符串中检查单词“Edge”。当您还要测试其他浏览器时,请确保首先检查Edge,否则您将获得误报(例如Chrome或Safari...)。

6
navigator.appVersion.indexOf('Edge') > -1

2
请问您能否解释一下它是如何工作的,以及它相比其他解决方案有何优势? - Phani
1
如果(/Edge/.test(navigator.userAgent)) { var orientangle = "n/a!" } else {var orientangle = screen.orientation.angle} - snahl
对于 Edge 版本 83,已被弃用。 - Omer Cohen
4
在更新版本中,他们称其为“Edg”而不是“Edge”。navigator.appVersion.indexOf("Edg") > -1(如果浏览器版本包含“Edg”,则返回true) - MAZ

5
我认为这是最好的方法,因为之前的方法存在漏洞或无法正常工作。
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)


4

使用JavaScript进行浏览器检查

是否为Chrome: window.navigator.userAgent.indexOf("Chrome") > -1;

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

是否为Edge: window.navigator.userAgent.indexOf("Edge/") > -1;

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

是否为Firefox: window.navigator.userAgent.indexOf("Firefox") > -1;

是否为Chromium Edge: window.navigator.userAgent.indexOf("Edg/") > -1; // 用于新版Chromium Edge


1
对于 Edge 版本 83,已被弃用。 - Omer Cohen
边缘检测在Edge 119上无法正常工作。 - undefined

4

你并不是唯一遇到这个问题的人。截至发帖时,即使Google Analytics也不能独立识别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

(要从JavaScript中提取请求的用户代理,请参见此帖子:Getting the User Agent with JavaScript

Edge仅在Windows 10上可用,因此您可以利用这一点来确保您的逻辑是安全的。查找UA中的以下值:

  • Windows NT 10.0 - 这告诉您用户正在使用Windows 10)
  • Edge - 这告诉您用户正在使用Edge

当然,您也可以直接查找Edge

更新-05/08

谷歌分析现已将Windows 10和Edge作为一流维度,可以直接进行筛选。


对于 Edge 版本 83,已被弃用。 - Omer Cohen

2

我这里的代码片段也是从 Stack Overflow 复制来的,很抱歉我无法提供原始代码的参考,但我已经进行了修改,所以对于那些正在寻找检查 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
    }
};

1
对于 Edge 版本 83,已被弃用。 - Omer Cohen

1
Edge 90版本在用户代理中不显示edg/部分。但它会显示Windows和Safari。现代Safari不能在Windows上运行,因此我编写了这个验证,检查用户代理中的Windows和Safari,并且它可以正常工作。
var isEdge = (function() {
  var agent = window.navigator.userAgent.toLowerCase();
  return agent.indexOf("windows") > -1 && agent.indexOf("safari") > -1
    ? true
    : false;
})();

0

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 );
}

将字符串Microsoft Internet Explorer替换为Edge或类似的内容。

编辑: 您可以使用以下代码查找用户代理字符串:

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出现在视野中。(https://dev59.com/5l0a5IYBdhLWcg3wNWTA#31279980) - evolutionxbox
但是userAgent字符串包含“Windows NT 10”和“Edge/12....”,这两者都可以用于获取浏览器信息。 - Martin Fischer
没错。我更关注MSIE,忘记了你可以使用不同的字符串来查找... - evolutionxbox
很遗憾,那不是我。除非有严重的问题,否则我不会点踩。 - evolutionxbox
2
你非常有帮助。尽管投反对票的人可能认为这个问题不应该有一个帮助浏览器嗅探的答案。我为了抵消反对票而点了赞。 - evolutionxbox

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接