在 Chrome 浏览器中检测高对比度扩展程序的使用 [英] Detect High Contrast extension use in Chrome browser

问题描述

我正在尝试以高对比度模式访问我的网站.为了检测高对比度模式何时启用，我创建了一个 JavaScript 方法来检测背景图像是否被禁用，因为高对比度模式禁用了背景图像.然后，如果浏览器处于高对比度模式，我会附加一个 CSS 文件来修复以高对比度显示.这在 Firefox、Edge 和 IE 中运行良好，但 Chrome 使用自己的扩展来创建高对比度，并且它不会禁用背景图像，因此在 Chrome 中没有附加用于高对比度的 CSS.

I am trying to make my website accessible in high-contrast mode. In order to detect when high-contrast mode is enabled, I created a JavaScript method to detect if background images are disabled, because high-contrast mode disables background images. Then if the browser is in high-contrast mode, I append a CSS file to make fixes for displaying in high contrast. This works fine in Firefox, Edge, and IE, but Chrome uses its own extension to create high-contrast, and it does not disable the background images, so in Chrome the CSS for high contrast is not appended.

通过搜索，我发现 Chrome 在网站上添加了过滤器，而不是启用/禁用/更改网站颜色或图像本身.我已经搜索并搜索过，但找不到任何东西可以测试以检查 Chrome 是否正在使用高对比度模式.如果有一种方法可以检测正在使用的扩展程序也可以解决问题，但我也找不到方法来做到这一点.

From searching I have found that Chrome adds a filter over the website as opposed to enabling/disabling/changing the website colors or images themselves. I have searched and searched, but I can't find anything to test to check if Chrome is using high-contrast mode. If there were a way to detect which extensions are being used that would also solve the problem, but I haven't been able to find a way to do that either.

我的代码实际上工作正常，我需要的是能够在 Chrome 中检测高对比度模式.这是我用来检查高对比度模式的方法.

My code actually works fine, all I need is to be able to detect the high-contrast mode in Chrome. Here is the method I use to check for high-contrast mode.

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 扩展程序会注入一些代码来生成高对比度的 LAF.

The Chrome Extension will inject some code to generate a highcontrast LAF.

由于注入，可能需要 setTimeout.就我而言，这是必需的.

The setTimeout could be required duo to the injection. In my case it was required.

这对我有用:

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

这篇关于在 Chrome 浏览器中检测高对比度扩展程序的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！