我试图在我的网页上添加一个由React.js构建的可访问性功能,以确保横幅的颜色不会受到的影响Chrome的高对比度插件。
我尝试通过添加检测Chrome插件是否已打开的功能来实现它,并且我的代码应切换一个类,以确保在高对比度模式下横幅颜色不会有太大变化。我注意到只有在刷新页面后才能看到此更改,因此我添加了这行代码window.location.reload()
以手动重新加载页面。
问题是,这部分代码进入无限循环,而我的页面将不会停止重新加载。我尝试用其他方法替换重载部分,结果仍然相同。这是我的React Component的代码:
componentDidMount = () => {
this.keepBannerColor()
}
keepBannerColor() {
// these two lines of code below is tell whether the browser is chrome
let userAgentString = navigator.userAgent;
let chromeAgent = userAgentString.indexOf("Chrome") > -1;
let header = document.querySelector('.mizaru-header')
if (header && chromeAgent) {
console.log('funciton triggered')
let htmlTag = document.getElementsByTagName('html');
let isInverted = htmlTag[0].getAttribute('hc') != null
header.classList.toggle('inverted', isInverted)
window.location.reload()
}
}
这是我的CSS类切换代码:.inverted{ filter: invert(100%); }
任何帮助都会很好!
答案 0 :(得分:1)
为什么不尝试将指标保存到localstorage
或sessionstorage
中,并在if条件中添加此验证:
您的代码段:
...
// Use local or session storage
let hasReloaded = localStorage.getItem('hasReloaded')
if (header && chromeAgent && !hasReloaded) {
console.log('funciton triggered')
let htmlTag = document.getElementsByTagName('html');
let isInverted = htmlTag[0].getAttribute('hc') != null
header.classList.toggle('inverted', isInverted)
// Set hasRealoaded to true
localStorage.setItem('hasReloaded', true)
window.location.reload()
}
...
答案 1 :(得分:1)
您不需要为此而重新加载页面,您需要MutationObserver
。
这将查找文档中特定元素上的更改。
将hc
属性动态添加到页面后,它将在添加或删除属性时进行监听。
如果打开了高对比度模式(根据设置更改了“ a4”),则下面的记录为"High Contrast", "a4"
;如果未激活该插件,则以下记录为“高对比度关闭”。
下面的优点是,根据设置“ a3”,“ a4”等,您可以应用不同的样式。
以下内容不正确,好像在禁用该插件时两次触发“ High Contrast Off”,因此您需要对此进行调查。 (这是因为当插件被关闭时,它首先将状态设置为“ a0”,然后删除该属性,在正常使用下,应该没问题,但是要注意一点)。
const targetNode = document.documentElement;
// Options for the observer (which mutations to observe)
const config = { attributes: true};
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
let name = "";
for(let mutation of mutationsList) {
if (mutation.type === 'attributes') {
if(mutation.attributeName == "hc"){
if(mutation.target.attributes.getNamedItem(mutation.attributeName) != null && mutation.target.attributes.getNamedItem(mutation.attributeName).value != "a0"){
console.log("High Contrast", mutation.target.attributes.getNamedItem(mutation.attributeName).value);
}else{
console.log("High Contrast Off");
}
}
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);