我正在尝试为我的网站创建页面主题功能。我想使用单独的CSS文件在页面上动态加载相应的主题。
我正在使用此代码:
fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", 'link.css') document.getElementsByTagName("head")[0].appendChild(fileref)
效果很好,但是如果CSS文件未加载,它不会返回任何信息。
.css加载时,有什么方法可以捕捉吗?也许通过使用ajax?
.css
onReadyStateChange加载CSS文件(或其任何其他更改readyState)时,Internet Explorer会触发一个事件。其他浏览器不会触发任何事件,因此您将必须手动检查样式表是否已加载,这可以通过document.styleSheets以固定间隔检查对象来轻松实现。
onReadyStateChange
readyState
document.styleSheets
例
window.onload = function (){ var filename = "link.css",sheet,i; var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); readyfunc = function () { alert("File Loaded"); } timerfunc = function (){ for (i=0;i<document.styleSheets.length;i++){ sheet = document.styleSheets[i].href; if(sheet !== null && sheet.substr(sheet.length-filename.length) == filename) return readyfunc(); } setTimeout(timerfunc,50); } if (document.all){ //Uses onreadystatechange for Internet Explorer fileref.attachEvent('onreadystatechange',function() { if(fileref.readyState == 'complete' || fileref.readyState == 'loaded') readyfunc(); }); } else { //Checks if the stylesheet has been loaded every 50 ms for others setTimeout(timerfunc,50); } document.getElementsByTagName("head")[0].appendChild(fileref); }
这很丑陋,但可以在所有浏览器中使用。