Як додати що-небудь у <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, які використовують дані, що знаходяться у метатегах для збору інформації. Facebook OpenGraph - один із прикладів. Вводити метатеги в голову потрібно, коли у вас немає прямого доступу до вихідного HTML, чи то з вини CMS, чи через те, що ви самостійно пишете аддон / ін'єкцію JavaScript.

— conceptDawg

Зауважте, що можливо, що <meta>динамічне додавання тегів не матиме жодного ефекту, залежно від того, що вони є та який браузер задіяний.

— Pointy

Хороший момент, саме так трапляється, коли хтось занадто зосереджується на проблемі ;-)

— mb897038

149

Ви можете вибрати його та додати до нього як звичайне:

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

— нікф
джерело

2

як я можу контролювати порядок, де буде розміщено це посилання

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

7

Прочитайте документацію: docs.jquery.com/Manipulation insertBefore - insertAfterце те, що ви хочете.

— nickf

3

Я помістив це в документ.

— Вже

Він додає посилання, але посилання не відображається у вікні сторінки Джерело ... Я можу переглянути його з інструментів розробки браузера, таких як 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

не потрібен appendChild-елемент DOM? тобто. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— fredrik

2

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

— Девід Гедлунд

10

Ви можете використовувати innerHTMLлише для стиснення додаткового рядка поля;

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

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

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

— Живці
джерело

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тегу? Я був під враженням , що тільки дозволені теги де base, link, meta, title, styleі script?

— mb897038

АФАКТИЧНО, у вашій відповіді на Аякс є саме ті елементи. Чи не так?

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

Дійсно, але я все ще не можу змусити його працювати з дівом всередині тегу head. Схоже, Chrome досить "розумний", щоб так чи інакше відображати вміст діви в тілі.

— 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

— Дейв

Речі, які можуть бути видалені, також є подіями.

— Гідропер