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

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

90 голосов
/ 14 декабря 2009

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

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

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

Ответы [ 9 ]

138 голосов
/ 14 декабря 2009

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

$('head').append('<link />');
113 голосов
/ 29 ноября 2011

JavaScript: 

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

Сделать DOM-элемент следующим образом: 

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

document.getElementsByTagName('head')[0].appendChild(link);
26 голосов
/ 14 декабря 2009

JQuery 

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

JavaScript: 

document.getElementsByTagName('head')[0].appendChild( ... );
8 голосов
/ 09 мая 2016

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

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

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

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

8 голосов
/ 25 марта 2014

В последних браузерах (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);
7 голосов
/ 09 мая 2016

Создайте временный элемент (например, g. 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().

3 голосов
/ 24 марта 2016

Попробуйте чистый 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'));
0 голосов
/ 31 мая 2018

Я не знаю, почему я ненавижу использовать jquery. я присвоил head идентификатор «head». 

<head id="head">
<meta charset="utf-8">
 <title></title>
</head>




<script type="text/javascript">
    var head = document.getElementById('head');
    if (window.screen.width<800) {
      head.innerHTML = "  <link rel='stylesheet' href='../css/gallerys.css?ver=1.2'>";
    }else {
      head.innerHTML="<link rel='stylesheet' href='../css/gallerys.css?ver=1.3'>";
    }
</script>
0 голосов
/ 14 декабря 2013

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

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

в любом случае это работает. Опция JavaScript, как говорили другие, это тоже правильно.

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

Нет похожих вопросов

...