Динамически изменяемый путь к таблице стилей не работает в IE и Firefox - PullRequest
Новая
       23

Динамически изменяемый путь к таблице стилей не работает в IE и Firefox

4 голосов
/ 12 января 2009

У меня есть следующий файл: 

<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 «content», и таблица стилей устанавливается на CSS, и эта CSS применяется к странице. Я могу изменить с помощью страницы CSS и в течение 5 секунд, когда страница обновляется, CSS также обновляется.

Но в IE и Firefox HTML-код загрузится, и я вижу, что атрибут href ссылки таблицы стилей IS меняется на "/ CSS + getTime ()", но пока загружается HTML-код, CSS никогда не применяется к странице. Я даже могу изменить содержимое DOC, и оно обновляется, но CSS никогда даже не применяется. Это просто страница без стиля.

Firefox и IE не поддерживают изменение ссылки на таблицу стилей таким способом? Есть ли лучший способ сделать это?

Ответы [ 5 ]

6 голосов
/ 12 января 2009

Вместо того, чтобы менять лист в одной ссылке, попробуйте использовать альтернативные таблицы стилей. Смотрите эту ссылку на использование альтернативных таблиц стилей:

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

4 голосов
/ 12 января 2009

Лучший способ включить файлы с помощью 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);
}

Когда вы загружаете новый лист, просто уничтожьте CSS внутри элемента стиля и замените его.

1 голос
/ 12 января 2009

Может быть, это поможет вам ... 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)
}
0 голосов
/ 12 января 2009

Похоже, вы просто каждый раз перезагружаете существующую страницу. Почему бы просто не использовать тег обновления в заголовке, чтобы заставить документ каждый раз перезагружаться и вставлять CSS и контент на стороне сервера. Намного проще, и это работает даже с отключенным JavaScript. 

<meta http-equiv="refresh" content="5;url=http://example.com/DOC" />
0 голосов
/ 12 января 2009

Это может быть проблема с кэшированием. Если вы делаете полное обновление (Ctrl + R в FF, Ctrl + F5 в IE), правильно ли отображается стиль? Если это все-таки решит проблему, вы можете захотеть удалить заголовок Last-Modified из файла CSS или добавить заголовок элемента управления кэшем, который указывает браузеру не кэшировать его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...