在Chrome浏览器中检测高对比度扩展的使用
我正在努力使我的网站在高对比度模式访问。为了检测何时启用高对比度模式，我创建了一个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">');
}
}
回答 2
Stack Overflow用户
发布于 2016-07-20 23:17:47
Chrome扩展将注入一些代码来生成高对比度的LAF。
注射时可能需要setTimeout。就我而言，这是必需的。
这对我起了作用：
setTimeout(function(){
var htmlTag = document.getElementsByTagName('html');
console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);Stack Overflow用户
发布于 2016-07-21 16:09:34
如果你问的是Windows高对比度模式，Chrome不知道什么时候是活动的。
通常，如果Windows用户选择启用高对比度模式，则该用户正在Microsoft Internet Explorer或Microsoft Edge中冲浪(因为这些浏览器支持该模式)。它们都支持专有的-ms-high-contrast @media规则。
检查缺少的背景图像是在IE/Edge中工作的一种策略，但使用媒体查询是一种更好的方法。尤其是自从Windows高对比度模式将很快允许边缘中的背景图像。
如果您希望检测某个特定的扩展在Chrome中设置了它自己的高对比度模式，那么了解哪个扩展会很有帮助。
例如，使用高对比度扩展，您可以在<html>标记上查找以下属性：hc="a3"和hcx="3" (对您来说值可能不同，但属性应该匹配)。如果您打开浏览器开发工具，您可以看到它所做的其他事情。但这些属性处于DOM的最高级别，使用起来可能是最安全的。
如果你问的是，这也是一个不同的过程。
https://stackoverflow.com/questions/38492220
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号