Могу ли я нацелить элемент до его закрытия? - PullRequest
3 голосов
/ 28 октября 2008

Я хочу добавить класс в тег body, не дожидаясь загрузки DOM, но я хочу знать, будет ли следующий подход правильным. Меня больше заботит валидность, чем то, поддерживают ли ее сейчас браузеры.

<body>
  $("body").addClass("active");
  ...
</body>

Спасибо, Стив

Ответы [ 6 ]

2 голосов
/ 28 октября 2008

Плагин .elementReady () , похоже, очень близок к тому, что вы ищете.

Он работает с использованием цикла setInterval, который завершается, как только document.getElementById() возвращает элемент для данного id.

Вы могли бы, вероятно, сделать небольшую модификацию этого плагина (или зафиксировать обновление / патч), чтобы разрешить общие селекторы (по крайней мере для "tagNames") вместо просто id s.

Я не верю, что существует какой-либо действительно надежный кросс-браузерный способ адресации элемента перед его загрузкой, кроме setInterval взлома

Если вы не можете поместить свою команду javascript в целевой элемент, как предлагает @JasonBunting.

2 голосов
/ 28 октября 2008

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

<html>
<head>
    <style type="text/css">
        .foobar { background-color: #CCC; }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.document.body.className = "foobar";
    </script>
    <div style="border: solid 1px"><br /></div>
    <script type="text/javascript">
    // happens before DOM is fully loaded:
        alert(window.document.body.className);
    </script>
    <span>Appears after the alert() call.</span>
</body>
</html>

В IE 7, когда имеет место alert(), значение установлено правильно, но стиль еще не применен (он быстро применяется, как только DOM заканчивает загрузку).

В Firefox стиль применяется ко времени, когда alert() имеет место.

В любом случае, надеюсь, это полезно для вас.

2 голосов
/ 28 октября 2008

Если элемент не существует в DOM, поиск не сможет его найти, и действие не будет применено. Если вы не можете сделать это в функции $ (document) .ready (), вы можете попытаться поместить код после ссылки на элемент. Я верю, что это сработает.

<body>
   <div id='topStories'></div>
   <script type='text/javascript'>
     $('div#topStories').addClass('active');
   </script>
</body>

Если вам нужно добавить класс в тело, я бы определенно использовал $ (document) .ready ().

1 голос
/ 28 октября 2008

В основном ответ - нет. В IE6 и Firefox 2 (браузерах, в которых у меня больше всего опыта), элемент не находится в DOM до тех пор, пока после тега close (или страница не будет отрисована, для недопустимого XHTML). Я знаю, что jQuery предоставляет удобные методы, которые, кажется, реагируют достаточно быстро, чтобы избежать «мерцания» в большинстве случаев. Вы бы использовали это так:

<script>
  $(document).ready(function() {
    $("body").addClass("active");
  });
</script>
<body>
  ..
  ..
  ..
</body>

Но это все, что касается javascript.

Конечно, в приведенном вами примере вы можете легко добиться того же эффекта с помощью:

<body class="active">
</body>
0 голосов
/ 29 октября 2008

Вместо того, чтобы добавлять класс к вашему тегу , вам может быть проще добавить класс к тегу , выполнив:

<script type="text/javascript">
    document.documentElement.className = 'active';
</script>
0 голосов
/ 28 октября 2008

Это было ОЧЕНЬ полезно.

Чтобы поставить маленький реальный мир на вопрос.

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

Что я не хочу делать, так это добавить это, а затем получить звонок, когда выйдет Firefox4, что я не должен был этого делать.

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

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