CSS удален из содержимого, встроенного через Javascript в Div
У меня есть следующий файл:
<html>
<head>
<title></title>
<script type = "text/javascript" src = "/Prototype.js"></script>
<script type = "text/javascript">
function load_content()
{
new Ajax.PeriodicalUpdater('content', '/UpdatedContent/,
{
method: 'post',
frequency: 5
});
//var fileref = document.createElement("link");
//fileref.setAttribute("rel", "stylesheet");
//fileref.setAttribute("type", "text/css");
//fileref.setAttribute("href", filename);
}
</script>
</head>
<body>
<div id = "content"></div>
<script type = "text/javascript">
load_content();
</script>
</body>
</html>
Контент из UpdatedContent должен загружаться в div «content» каждые 5 секунд. Что странно, так это то, что HTML загружается, но раздел в верхней части загруженной страницы полностью удаляется, когда он вставляется в «контент».
Загруженная страница по сути такова:
<style type = "text/css">
... lots of css here ...
</style>
... lots of HTML here ...
Нет,
Нельзя ли вводить CSS напрямую в div ?? Есть ли причина, по которой инфраструктура Prototype или DOM браузера удаляют CSS?
Как я могу включить CSS без отдельного вызова ??
Как вы можете видеть из данного основного файла, страница будет полностью пустой без загрузки чего-либо в div "content". Это сделано намеренно. Я в основном хочу использовать это как структуру для динамической загрузки обновляемого содержимого через определенный интервал, чтобы страница не должна была полностью перезагружаться для обновления данных.
И нет, я не могу просто закодировать CSS в указанный выше файл, поскольку CSS тоже будет меняться.
Редактировать: Что касается ответ Яауи ... теперь я знаю, почему это происходит, поскольку я передаю стиль и контент одним целым. Если я выделю CSS в отдельный файл, который можно загрузить, как мне затем загрузить его через AJAX (желательно с помощью Prototype), а затем, что более важно, установить этот CSS в качестве таблицы стилей для содержимого страницы?
Chrome, IE и Firefox ... Насколько я понимаю, все ... имеет почти все 3 основных средства визуализации.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Тег <style> разрешен только в <head>HTML и XHTML, но не в <body> или любом из его потомков. Веб-браузеры, как правило, довольно снисходительны к этому при первоначальном анализе документа, но при изменении innerHTML я ожидал, что браузер проигнорирует любые элементы <style>, потому что этот тип элемента там не ожидается.
Можно ли в качестве обходного пути использовать встроенный CSS в вашем ответе, то есть использовать атрибут style = "" передаваемых вами HTML-элементов?
Обновлено: Чтобы добавить CSS в <head>, потребуется одно из двух:
- Два раза туда и обратно на ваш сервер:
- Ответ, который включает и то, и другое, и может быть проанализирован перед вставкой
В этом случае я бы рекомендовал кодировать ваши две части в объект JSON перед отправкой. Ваш обратный вызов для действия AJAX должен разделить их и прикрепить к их соответствующим местоположениям (сначала стиль, чтобы избежать дрожания экрана)
{"style":"\ndiv#ajax7373 a {\n color:#fff;\n text-decoration:underline;\n font-weight:bold;\n \n}\ndiv#ajax7373 {\n background-color:#ff1cae;\n color:#ff6ccf;\n}","object":"\n<div id=\"#ajax7373\">\n\tThere is the contents of your div and a <a href=\"#\">link</a>\n</div>\n"}
Тем не менее, мне трудно поверить, что приложение так сильно поддерживает разделение стиля / контента и использует метод, в котором стиль должен генерироваться контентом. Почему бы не стилизовать весь домен, включая ожидаемый возврат ваших запросов AJAX? Действительно ли элементы, запрошенные AJAX, будут иметь достаточно различий в структуре / стиле, чтобы гарантировать это?
Ах ... Я этого не знал. К сожалению, нет, я не могу использовать атрибуты встроенного стиля ... технически я мог бы поместить их туда, но по целому ряду причин CSS намеренно сохраняется отдельно.
по уважительным причинам ... вы должны отметить элемент соответствующими классами
Вы застряли либо со встроенными стилями для сгенерированного CSS, либо вам придется написать множество имен классов для всех различных стилей, которые вам нужны, чтобы вы все еще могли отделить стили. Затем вы можете изменить имена классов с помощью JS.
вы, кажется, не верите в решение на основе классов, но я считаю, что это оптимально - макет (CSS) должен иметь полный контроль над его доменом, а разметка и поведение (JS) должны указывать, где и к чему это относится
В каких браузерах вы наблюдаете такое поведение?