Fatal编程技术网
  • javascript/
  • Javascript 动态更改样式表路径在IE和Firefox中不起作用

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

javascript css ajax

Javascript 动态更改样式表路径在IE和Firefox中不起作用,javascript,css,ajax,Javascript,Css,Ajax,我有以下文件： <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

我有以下文件：

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


函数加载_内容（）
{
var d=新日期（）；
新的Ajax.PeriodicalUpdater（'content'，'/DOC？'+d.getTime（），
{
方法：“post”，
频率：5，
onSuccess:功能（传输）{
对于（i=0；（a=document.getElementsByTagName（'link'）[i]）；i++）
{
if（a.getAttribute（'rel'）='css'&&a.getAttribute（“type”）=='text/css'）
{
a、 href='/CSS？'+d.getTime（）；
}
}
}
});
}
加载内容（）；
注意：忽略d.getTime（）调用……这些调用只是为了解决IE不能从AJAX调用加载新页面的问题，因为它的缓存方案过于激进

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

奇怪的是，在Chrome中它工作得很好。DOC加载到“content”div中，样式表设置为CSS，并将CSS应用于页面。我可以改变CSS页面，在5秒钟内，当页面刷新时，CSS也会刷新

但是在IE和Firefox中，HTML将被加载，我可以看到样式表链接的href属性被更改为“/CSS+getTime（）”，但是，当HTML加载时，CSS从未应用于页面。我甚至可以更改文档的内容并进行更新，但css从未应用过。它只是一个没有样式的页面

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

也许这会帮助你。。。

这可能是缓存问题。如果进行硬刷新（FF中为Ctrl+R，IE中为Ctrl+F5），它是否正确显示样式？如果这确实解决了问题，您可能希望从CSS文件中删除上次修改的标题，或者添加一个缓存控制标题，告诉浏览器不要缓存它。

与其在单个链接中更改工作表，不如尝试使用其他样式表。请参见有关使用备用样式表的链接：

看起来您每次都只是在重新加载现有页面。为什么不在标题中使用refresh标记强制每次重新加载文档并将其放入CSS和content server端呢。更简单，甚至在禁用javascript的情况下也可以使用

<meta http-equiv="refresh" content="5;url=http://example.com/DOC" />
通过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上不起作用。还有其他方法吗？不用link元素，而是将css的内容加载到style元素中。浏览器知道在包含样式元素后重新绘制，但不一定在链接后重新绘制。我试图在IE8中使用最后一段代码，但没有加载样式（甚至是内联）。然后我试着分析facebook在js框架中是如何做到这一点的，代码变成了这样。现在，我可以在开发者工具栏中看到内联样式，但是没有应用这些样式。我的应用程序是所有javascript-视图都是用ejs呈现的。你可能知道如何解决这个问题吗？欣赏创意！ 
function onLoadFunction() {
    var a = document.createElement('style');
    a.appendChild(document.createTextNode('body {color: blue;}'));
    document.getElementsByTagName("body")[0].appendChild(a);
}