我正在尝试以高对比度模式访问我的网站。为了检测何时启用高对比度模式,我创建了一个JavaScript方法来检测是否禁用了背景图像,因为高对比度模式会禁用背景图像。然后,如果浏览器处于高对比度模式,我会附加一个CSS文件来修复高对比度显示的问题。这在Firefox,Edge和IE中可以正常工作,但是Chrome使用其自己的扩展名来创建高对比度,并且它不会禁用背景图片,因此在Chrome中不附加用于高对比度的CSS。

通过搜索,我发现Chrome会在网站上添加一个过滤器,而不是启用/禁用/更改网站颜色或图像本身。我进行了搜索,但找不到任何可测试的内容来检查Chrome是否使用高对比度模式。如果有一种方法可以检测到正在使用的扩展名,那也可以解决问题,但是我也没有找到一种方法来做到这一点。

我的代码实际上运行良好,我所需要的只是能够检测Chrome中的高对比度模式。这是我用来检查高对比度模式的方法。

let highContrast = (options) => {

  let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
  hcDetect.appendTo(document.body);

  if (hcDetect.css('background-image') === 'none') {
    $('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');

  }
}

最佳答案

Chrome扩展程序将注入(inject)一些代码以生成高对比度的LAF。

setTimeout可能在注入(inject)时是必需的。就我而言,这是必需的。

这为我工作:

setTimeout(function(){
   var htmlTag = document.getElementsByTagName('html');
   console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);

关于javascript - 在Chrome浏览器中检测高对比度扩展程序的使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38492220/

10-13 02:45