Как манипулировать DOM-деревом перед его отображением на экране? (JavaScript, JQuery, ...) - PullRequest
Новая
       6

Как манипулировать DOM-деревом перед его отображением на экране? (JavaScript, JQuery, ...)

1 голос
/ 15 ноября 2010

Проблема проста, но не может найти решение.Большое спасибо за тех, кто помогает.Я хочу изменить веб-страницу (дерево DOM) до ее отображения на экране.Я понимаю, что дерево DOM полностью загружается в память перед обработкой.

Кто-нибудь из вас знает, как обработать это полностью загруженное дерево DOM, пока оно находится в памяти, и затем позволить ему отображаться с его новой структурой??

Причина, по которой я хочу это сделать, заключается в том, что я работаю над дополнением, которое добавляет контент на существующий веб-сайт.

добавлено-> Просто нужно упомянуть, что существующийвеб-сайт не мой, поэтому я не могу использовать php для изменения содержимого сайта, а не моего.

Но сейчас веб-сайт отображается без дополнительного содержимого, и вы видите, что содержимое появляется через 1 секунду.(потому что я добавляю контент после того, как веб-сайт уже отображается), поэтому вы видите, что контент веб-сайта перемещается.

Спасибо за помощь.

Ответы [ 4 ]

4 голосов
/ 15 ноября 2010

Это не очень сложно.Просто скройте тело, используя CSS, и на событии onload документа сделайте ваши манипуляции и покажите тело.

Краткий пример: 

<html>
<head>
<title>example</title>
<style type="text/css">
<!--
html.scripted body{display:none;}
-->
</style>
<script type="text/javascript">
<!--
//set class for html-element, so the css-rule above will be applied to the body
document.getElementsByTagName('html')[0].className='scripted';

//on page load
window.onload=function()
{
  //do the manipulation
  document.body.appendChild(document.createElement('em')).appendChild(document.createTextNode('dynamic content'));
  alert('manipulation done');

  //show the body
  document.body.style.display='block';
}
//-->
</script>
</head>
<body>
static content
</body>
</html>

В отношении приведенного ниже комментария Брэда вы можете подумать, есть ли другие способы.Поскольку реальная проблема, по-видимому, связана с движущимся контентом, возможно, можно разместить статический заполнитель, где динамический контент появится позже.

1 голос
/ 15 ноября 2010

Вы упоминаете PHP в своих тегах, так почему бы не создать свой документ на стороне сервера?Тогда, это не имеет значения.

Если вы должны выполнить эту клиентскую сторону, то я бы тоже об этом не беспокоился.Веб-страницы отображаются в любом случае постепенно.Может быть, у вас быстрый компьютер и быстрое соединение с вашими серверами, но я гарантирую вам, что большинство ваших пользователей этого не делают.

Просто добавьте некоторый код в бит, где DOM готов сделать улучшения вашей страницы.Соответствующий: Javascript DOM готов без всей структуры

0 голосов
/ 18 мая 2011

Я наконец нашел решение.

Я делаю аддон, глядя на навигацию веб-страницы. Фактически, он смотрит на изменения URL, так что я знаю, что пользователь перемещается в другое место (поэтому я знаю, что должен что-то сделать, прежде чем я получу событие «Загрузить» веб-страницы).

Затем я просто пытаюсь получить доступ к элементу (который, как я знаю, будет в DOM, например, к заголовку), используя цикл. Затем, когда появляется элемент (перед событием «Загрузка»), я вставляю код и прекращаю зацикливание / прослушивание.

Если кому-то понадобится более подробная информация о том, как все это делается, я с удовольствием отвечу на ваш вопрос.

Спасибо.

0 голосов
/ 15 ноября 2010

Единственный способ манипулировать DOM до его загрузки - использовать препроцессор, такой как php.

Javascript может манипулировать DOM только после его загрузки.

Для получения любой дополнительной помощи, кроме этой, вы должны предоставить более конкретный пример: -)

...