CSS извлечен из содержимого, внедренного через Javascript в Div - PullRequest
0 голосов
/ 12 января 2009

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

<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 тоже будет меняться.

Редактировать: Относительно Ответ yaauie ... теперь я знаю, почему это происходит, так как я передаю стиль и содержание в одной части. Если я разделю CSS в отдельный файл, который можно загрузить, как мне тогда загрузить его через AJAX (предпочтительно с использованием Prototype), а затем, что более важно, установить этот CSS в качестве таблицы стилей для содержимого страницы?

Ответы [ 2 ]

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

Вы застряли либо со встроенными стилями для сгенерированного CSS, либо вам придется написать тонны имен классов для всех различных стилей, которые вам нужны, чтобы вы могли по-прежнему выделять стили. Затем вы можете изменить имена классов с помощью JS.

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

Тег <style> допускается только в <head> из HTML и XHTML , но не в <body> или каких-либо его потомках. Веб-браузеры обычно прощают это при первоначальном разборе документа, но при изменении innerHTML я ожидаю, что браузер будет игнорировать любые элементы <style>, потому что этот тип элемента там не ожидается.

В качестве обходного пути можно ли использовать в своем ответе inline-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 элементы будут иметь достаточно различий в структуре / стиле, чтобы это оправдать?

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