动态更改样式表路径在 IE 和 Firefox 中不起作用答案

【问题标题】：Dynamically changing stylesheet path not working in IE and Firefox动态更改样式表路径在 IE 和 Firefox 中不起作用
【发布时间】：2010-09-30 22:48:31
【问题描述】：

我有以下文件：

<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>

注意：忽略 d.getTime() 调用...这些只是为了解决 IE 无法从 AJAX 调用加载新页面的问题，因为它的缓存方案过于激进。

基本上，当它在 /DOC 处重新加载文件时，它应该将当前样式表设置为 /CSS 处的文件...... DOC 和 CSS 都在不断变化。

奇怪的是，它在 Chrome 中运行良好。 DOC 在“内容” div 中加载，样式表设置为 CSS，并将 CSS 应用于页面。我可以用 CSS 页面更改，5 秒内刷新页面时，CSS 也会刷新。

但在 IE 和 Firefox 中，HTML 会加载，我可以看到样式表链接 IS 的 href 属性已更改为“/CSS + getTime()”，但是在加载 HTML 时，css 从不应用于页面。我什至可以更改 DOC 的内容并且它会更新，但 CSS 甚至从未应用过。它只是一个没有样式的页面。

Firefox 和 IE 不支持以这种方式更改样式表引用吗？有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript css ajax

【解决方案1】：

也许这会帮助你...... 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)
}

【讨论】：

【解决方案2】：

这可能是缓存问题。如果您进行硬刷新（FF 中的 Ctrl+R，IE 中的 Ctrl+F5）是否正确显示样式？如果确实可以解决问题，您可能需要考虑从 CSS 文件中删除 Last-Modified 标头或添加缓存控制标头，告诉浏览器不要缓存它。

【讨论】：

【解决方案3】：

与其在单个链接中更改表单，不如尝试使用备用样式表。有关使用备用样式表，请参阅此链接：

http://www.alistapart.com/articles/alternate/

【讨论】：

【解决方案4】：

看起来您每次都只是重新加载现有页面。为什么不只在标题中使用刷新标签来强制文档每次重新加载并放入 CSS 和内容服务器端。简单得多，即使禁用 javascript 也能正常工作。

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

【讨论】：

【解决方案5】：

通过 javascript 包含文件的最佳方法是插入一个新的 dom 元素。

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

但是，很明显，您将遇到的问题是，一旦文档完成加载（并且您正在使用 ajax），firefox 和 ie 将不会重新绘制画布。解决这个问题的方法是获取样式表的内容并将它们包含在样式元素中。此示例代码将动态更改页面上的颜色。

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

加载新工作表时，只需销毁样式元素内的 css 并替换它即可。

【讨论】：

有趣...不过有两件事。创建元素后如何访问和更改 CSS？我没有头绪。其次...我四处搜索，发现一堆地方说 document.createElement('link') 在 IE 上不起作用...还有其他方法吗？
不使用链接元素，而是将 css 的内容加载到样式元素中。浏览器知道在您包含样式元素后重新绘制，但不一定在链接之后。
我试图让最后一段代码在 IE8 中工作，但没有加载样式（甚至是内联的）。然后我尝试分析facebook是如何在他们的js框架中做到这一点的，代码变成了pastie.org/1816561之类的东西。现在我可以在开发人员工具栏中看到内联样式，但没有应用样式。我的应用程序都是 javascript - 视图是用 ejs 呈现的。你可能知道如何解决这个问题？欣赏创意！