Всегда ли элемент <head>доступен в DOM, даже если он отсутствует в разметке HTML? - PullRequest
Новая
       19

Всегда ли элемент <head>доступен в DOM, даже если он отсутствует в разметке HTML?

14 голосов
/ 29 августа 2010

Каждый наблюдаемый мной браузер создает элемент <head>, который доступен в DOM, даже если в разметке документа нет явных тегов <head></head>.

Однако Google Analytics использует следующий код длядинамическая вставка скрипта: 

(function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();

Следующая строка: 

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

, кажется, делает особую уступку для случаев, когда элемент <head> отсутствует.

Является ли это просто случаем крайней обратной совместимости (например, для Netscape 4 и т. П.), Или необходимо учитывать, что современные браузеры (например, Internet Explorer 6 и более поздние версии) всегда будут иметь доступ<head> элемент в DOM?

Ответы [ 3 ]

14 голосов
/ 29 августа 2010

Современные браузеры создают элемент head для вас, когда это необходимо.

Но предполагать, что клиент сделает это, не разумно, если вы хотите, чтобы ваш код был пуленепробиваемым.Таким образом, Google являются консервативными и безопасными.

Дополнительный пункт в их заявлении является минимальным, но добавляет дополнительную надежность.Так что это хорошо.

ps Хорошая работа по этому вопросу и извлечение соответствующего кода.

Добавлено:

HTMLspec говорит, что тег head является необязательным.Я не думаю, что создание браузером "элемента" головы в dom требуется спецификацией.Google не хочет (и не должен) рассчитывать на то, что он там есть.

2 голосов
/ 15 февраля 2011

На самом деле, не все браузеры автоматически создают <head></head> при загрузке документа. Я имею в виду даже не на современном браузере, таком как Chrome (версия: 9.0.597.102).

Когда вы загружаете изображение непосредственно в браузер, например:
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg
браузер сгенерирует только тег <body>, содержащий изображение, а тег <head> не найден в исходном коде.

Google использует этот код: 

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

Мы не можем создать <head>, используя document.createElement('head'): использование этого приведет к ошибке: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3".
Таким образом, когда нет тега head, вы не можете ничего добавить к нему. Вот почему Google поместил элемент в <body>.

1 голос
/ 20 января 2013

Не указано, что элемент "head" будет присутствовать всегда, обычно это зависит от браузеров и документа DOCTYPE. Для обсуждения и нескольких тестов по этому вопросу см .:

http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/

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

function require(src) {
  var s, d = document, r = d.documentElement;
  (s = d.createElement('script')).src = src;
  r.removeChild(r.insertBefore(s, r.firstChild));
}

require(('https:' == document.location.protocol ?
  'https://ssl' : 'http://www') +
  '.google-analytics.com/ga.js');

здесь скрипт также удаляется из документа (после загрузки / выполнения), но это только личный вкус, при необходимости можно пропустить «removeChild». Нет различий в поведении, если убрать его или оставить на месте.

...