link css 加载判断,解决不了的问题?
in Web前端 on javascript web 前端, web html css 前端 - Hits()
先看原理:
Chrome / Safari:
linkNode.sheet 在 css 文件下载完成并解析好后才有值,之前为 undefined
linkNode.sheet.cssRules 同域时返回 CSSRuleList, 跨域时返回 null
chrome还是不一样
Firefox:
linkNode.sheet 在 css 插入 DOM 中后立刻有值,插入前为 undefined
linkNode.sheet.cssRules 在文件还未下好时,抛出 NS_ERROR_DOM_INVALID_ACCESS_ERR
在文件下载并解析好后,
同域时返回 cssRuleList
只要是跨域(不管对错)抛出 NS_ERROR_DOM_SECURITY_ERR
IE6-9 / Opera:
linkNode.sheet 和 cssRules 在 css 插入 DOM 后都立刻可访问,cssRules 为 []
当文件下载完成时,cssRules 为 cssRuleList
IE 下,无论成功失败,都会触发 onload
Opera 只在成功时才触发 onload,跨域时访问cssRules 会抛异常。
缺陷:Opera 遇到 404 时,需要降级到 timeout
这样的写法:
function checkcss(link) { try { if (link.sheet && link.sheet.cssRules.length > 0) return true; else if (link.styleSheet && link.styleSheet.cssText.length > 0) return true; else if (link.innerHTML && link.innerHTML.length > 0) return true; } catch (ex) { //FF下的判断跨域,也不行,路径错了还是抛这个异常 if (ex.name && ex.name == 'NS_ERROR_DOM_SECURITY_ERR') return true; } return false; }
能解决ie的问题,safari,chrome,opera,FF就不行了。
其他什么owningElement啊,ownerNode的,都不行。
目前无解。