Question

我有以下文件：

<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在“content”div中加载，样式表设置为CSS，并且css应用于页面。我可以使用CSS页面进行更改，并且只需5秒钟，当页面刷新时，CSS也会刷新。

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

Firefox和IE不支持以这种方式更改样式表引用吗？有更好的方法吗？

Answer 1

不要在单个链接中更改工作表，而是尝试使用备用样式表。有关使用备用样式表的信息，请参阅此链接：

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

Answer 2

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

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

然而，显然你遇到的问题是firefox，即文件加载完成后你不会重画画布（而你使用的是ajax）。解决这个问题的方法是获取样式表的内容并将它们包含在样式元素中。此示例代码将动态更改页面上的颜色。

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

加载新工作表时，只需销毁style元素中的css并替换它。

Answer 3

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

Answer 4

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

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

Answer 5

这可能是一个缓存问题。如果你进行硬刷新（在FF中按Ctrl + R，在IE中按Ctrl + F5）它是否正确显示样式？如果确实修复了它，您可能希望从CSS文件中删除Last-Modified标头或添加缓存控件标头，告知浏览器不要缓存它。

动态更改样式表路径无法在IE和Firefox中运行

5 个答案: