I have the following file:
<html> <head> <title></title> <link rel='css' type='text/css' href='/empty.css' title='css' /> <script type='text/javascript' src='/Prototype'></script> <script type='text/javascript'> function load_content() { var d = new Date(); new Ajax.PeriodicalUpdater('content', '/DOC?'+d.getTime(), { method: 'post', frequency: 5, onSuccess: function(transport) { for(i=0; (a = document.getElementsByTagName('link')[i]); i++) { if(a.getAttribute('rel') == 'css' && a.getAttribute('type') == 'text/css') { a.href = '/CSS?'+d.getTime(); } } } }); } </script> </head> <body> <div id='content'></div> <script type='text/javascript'> load_content(); </script> </body> </html> Note: Ignore the d.getTime() calls…these are just to get around an issue with IE not loading a new page from an AJAX call because it’s caching scheme is too aggressive.
Basically, when it reloads the file at /DOC, it is supposed to be setting the current stylesheet to the file at /CSS… both DOC and CSS and constantly changing.
What’s weird is that in Chrome it works great. DOC loads up in the ‘content’ div and the stylesheet gets set to CSS and that css is applied to the page. I can change with CSS page and withing 5 seconds, when the page is refreshed, the CSS will be refreshed as well.
But in IE and Firefox, the HTML will load and I can see that the href attribute of the stylesheet link IS getting changed to ‘/CSS + getTime()’ but, while the HTML loads, the css is never applied to the page. I can even change the content of DOC and it updates, but the css is never even applied. It just stays a style-free page.
Does Firefox and IE not support changing the style sheet reference in this way? Is there a better way to do this?
Rather than changing the sheet in a single link, try using alternate style sheets. See this link on using alternate style sheets:
http://www.alistapart.com/articles/alternate/