Dynamically changing stylesheet path not working in IE and Firefox_问答_开发者

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 styleshe开发者_StackOverflowet 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/

The best way to include files via javascript is to insert a new dom element.

var a = document.createElement('link');
a.href="inset.css";
a.rel="stylesheet";
document.getElementsByTagName("head")[0].appendChild(a);

However, obviously the problem you're going to run into though is that firefox and ie will not repaint the canvas once the document is finished loading (and you're using ajax). The way you get around that is by taking the contents of the stylesheets and including them in a style element. This sample code will change the color on the page dynamically.

function onLoadFunction() {
    var a = document.createElement('style');
    a.appendChild(document.createTextNode('body {color: blue;}'));
    document.getElementsByTagName("body")[0].appendChild(a);
}

When you load a new sheet, just destroy the css inside the style element and replace it.

maybe this will help you ... http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

It looks like you are simply reloading the existing page every time. Why not just use the refresh tag in your header to force the document to reload each time and put in the CSS and content server-side. A lot simpler and it works even with javascript disabled.

<meta http-equiv="refresh" content="5;url=http://example.com/DOC" />

It might be a caching issue. If you do a hard refresh (Ctrl+R in FF, Ctrl+F5 in IE) does it display the style properly? If that does fix it, you may want to look at removing the Last-Modified header from the CSS file or adding a cache control header telling the browser not to cache it.