Как добавить что-нибудь в <head> через jquery / javascript?

102

Я работаю с CMS, которая предотвращает редактирование исходного кода HTML для <head>элемента.

Например, я хочу добавить над <title>тегом следующее:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

— Джитендра Вьяс
источник

8

Это не имеет смысла ... Голова разбирается перед выполнением javascript. Добавление мета-материала в заголовок через javascript не даст желаемого эффекта.

— Андре Хавердингс,

1

@Mickel - да. ответы на все вопросы мне помогают

— Джитендра Вьяс

2

Хотя это не связано с вопросом о CMS, в определенных обстоятельствах может иметь смысл добавить метатеги. Существуют различные надстройки браузера и инъекции javascript, которые используют данные, содержащиеся в метатегах, для сбора информации. OpenGraph от Facebook - один из примеров. Внедрение метатегов в заголовок необходимо, когда у вас нет прямого доступа к исходному HTML, будь то по вине CMS или потому, что вы сами пишете надстройку / инъекцию javascript.

— conceptDawg

Обратите внимание, что <meta>динамическое добавление тегов может не иметь никакого эффекта, в зависимости от того, что они собой представляют и какой браузер задействован.

— Pointy

Хороший момент, вот что происходит, когда слишком много

— внимания уделяешь

149

Вы можете выбрать его и добавить к нему как обычно:

$('head').append('<link />');

— Nickf
источник

2

как я могу контролировать заказ, где будет размещена эта ссылка

— Джитендра Вьяс

7

Прочтите документацию: docs.jquery.com/Manipulation insertBefore , insertAfterэто то , что вам нужно.

— nickf

3

Я поместил это в document.ready, но он не добавляется в содержимое моей головы

— serpent403

Он добавляет ссылку, но ссылка не отображается в представлении страницы Источник ... Я могу просмотреть ее из инструментов разработки браузера, таких как Firebug. Могу ли я также просмотреть ссылку в исходном виде?

— Панкадж Тивари

4

@PankajTiwari Вы не увидите его в представлении исходного кода, потому что код добавляет его в текущий документ, а не в исходный источник (который был предоставлен сервером). Вот почему инструменты FireBug и Chrome Dev так полезны.

— Бернхард Хофманн

129

JavaScript:

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

Сделайте элемент DOM так:

link=document.createElement('link');
link.href='href';
link.rel='rel';

document.getElementsByTagName('head')[0].appendChild(link);

— Джошуа Вудворд
источник

1

Работает с элементами скрипта!

— Рэй Фосс

26

jQuery

$('head').append( ... );

JavaScript:

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

— Дэвид Хедлунд
источник

5

Dosen't appendChild требуется DOM-элемент? т.е. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— Фредрик

2

Ну да. Я просто оставил эту часть, ...потому что я не чувствовал, что это центральная часть вопроса, а также, на момент написания не было практического примера того, что он хотел вставить в голову. но да, это должен быть DOM-элемент.

— Дэвид Хедлунд,

10

Вы можете innerHTMLпросто объединить строку дополнительного поля;

document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'

Однако вы не можете гарантировать, что дополнительные элементы, которые вы добавляете в заголовок, будут распознаваться браузером после первой загрузки, и, возможно, вы получите FOUC (мигание нестилизованного содержимого) при загрузке дополнительных таблиц стилей.

Я не смотрел API годами, но вы также можете использовать document.write, что было разработано для такого рода действий. Однако для этого потребуется заблокировать отображение страницы до тех пор, пока не будет выполнен исходный запрос AJAX.

— Jivings
источник

9

В последних версиях браузеров (IE9 +) вы также можете использовать document.head :

Пример:

var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';

document.head.appendChild(favicon);

— Бенни Нойгебауэр
источник

9

Создайте временный элемент (например DIV), назначьте свой HTML-код его innerHTMLсвойству, а затем добавьте его дочерние узлы к HEADэлементу один за другим. Например, вот так:

var temp = document.createElement('div');

temp.innerHTML = '<link rel="stylesheet" href="example.css" />'
               + '<script src="foobar.js"><\/script> ';

var head = document.head;

while (temp.firstChild) {
    head.appendChild(temp.firstChild);
}

По сравнению с перезаписью всего HEADсодержимого через него innerHTML, это никак не повлияет на существующие дочерние элементы HEADэлемента.

Обратите внимание, что скрипты, вставленные таким образом, по-видимому, не выполняются автоматически, а стили применяются успешно. Поэтому, если вам нужно выполнить скрипты, вы должны загрузить файлы JS с помощью Ajax, а затем выполнить их содержимое с помощью eval().

— Марат Таналин
источник

Вот как я это делаю в body, но действительно ли это можно сделать внутри headтега -tag? Я был под впечатлением , что только разрешенные теги где base, link, meta, title, styleи script?

— mb897038

AFAICT, у вас есть именно эти элементы в вашем ответе Ajax. Не так ли?

— Марат Таналин

Действительно, но я все еще не могу заставить его работать с div внутри тега head. Похоже, Chrome достаточно «умен», чтобы в любом случае отображать содержимое div в теле.

— mb897038

2

Вы, наверное, не внимательно прочитали ответ. ;-) DIVЭлемент - это всего лишь временный контейнер для анализа HTML-кода . Вы не должны вставлять DIVсаму себя в HEAD. Вы должны вставить его дочерние узлы . См. Пример, который я добавил к ответу.

— Марат Таналин

1

@GaetanL. «Пока внутри tempэлемента есть дочерние элементы ». См. Документацию по Node.firstChild () .

— Марат Таналин

4

Попробуйте чистый javascript:

Библиотека JS:

appendHtml = function(element, html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    while (div.children.length > 0) {
        element.appendChild(div.children[0]);
    }
}

Тип: appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');

или jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));

— KingRider
источник

-5

С jquery у вас есть другой вариант:

$('head').html($('head').html() + '...');

в любом случае он работает. Другой вариант JavaScript сказал, что это тоже правильно.

— Дэйв
источник

2

Это удалит существующий контент и сгенерирует новые элементы. Это может иметь нежелательные побочные эффекты, такие как потеря динамически установленных свойств DOM и повторное выполнение скриптов.

— Квентин

по этой причине вы должны использовать перед $ ('head'). html () для восстановления всех свойств DOM

— Дэйв,

1

Использование .html()не восстановит все свойства DOM. (Наиболее распространенный и наиболее заметный случай этой проблемы возникает при использовании аналогичного кода для добавления новых полей в форму. Атрибут value представляет значение поля по умолчанию, поэтому его получение html()и последующее восстановление сбросит все существующие значения по умолчанию).

— Квентин

Я уверен, что вы протестировали его в своем коде, он работает, и все свойства DOM работают. Пожалуйста, проверьте себя, я работаю в IE11

— Дэйв

Вещи, которые можно удалить, также являются событиями.

— Hydroper