2021年10月26日 15:19 阅读量:760
背景:网站信息无障碍工具条部署安装的时候,发现有些站点是vue,页面异步加载,无障碍工具条无法渲染问题。
PC端无障碍工具条解决方法
第一步:初始化的时候,延迟1s渲染页面标签(一般1s钟原网站数据加载完毕)
第二步:两种监听事件,监听url变化替代监听事件,重新渲染标签。这里没有采用定时器(定时器隔1s重新渲染标签,页面内容大的话容易使浏览器崩溃)
监听鼠标点击事件mousedown
,这里还可以优化,专门监听鼠标点击a标签事件
window.addEventListener('mousedown', function(e) {
setTimeout(function() {
//todo
}, 1000)
})
原网站url变化跳转,页面无刷新,监听replaceState
和 pushState
事件
var _wr = function (type) {
var orig = history[type]
return function () {
var rv = orig.apply(this, arguments)
var e = new Event(type)
e.arguments = arguments
window.dispatchEvent(e)
return rv
}
}
history.pushState = _wr('pushState')
history.replaceState = _wr('replaceState')
window.addEventListener('replaceState', function (e) {
setTimeout(function() {
//todo
}, 1000)
})
window.addEventListener('pushState', function (e) {
setTimeout(function() {
//todo
}, 1000)
})
后续需要解决手机端
无障碍工具条异步加载渲染的问题
点击此查看-->
手机端无障碍工具条演示(仅手机端打开)
点击此查看-->
PC端无障碍工具条演示(仅PC端打开)
点击此查看-->
我们能提供的信息无障碍服务
点击此查看-->
无障碍工具条授权方式和区域代理
点击此查看-->
相关服务报价参考