Jak dodać cokolwiek w <head> poprzez jquery / javascript?

102

Pracuję z CMS, który uniemożliwia edycję źródła HTML dla <head>elementu.

Na przykład chcę dodać następujący <title>tag nad tagiem:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
javascript jquery css xhtml Jitendra Vyas
źródło
8
To nie ma sensu ... Głowa jest analizowana przed wykonaniem javascript. Dodanie meta stuf do głowy za pomocą javascript nie przyniosłoby pożądanego efektu.
Andre Haverdings,
1
@Mickel - tak. pomagają mi odpowiedzi na wszystkie pytania
Jitendra Vyas
2
Chociaż nie jest to związane z pytaniem o CMS, w pewnych okolicznościach może mieć sens dodanie metatagów. Istnieją różne dodatki do przeglądarek i iniekcje javascript, które używają danych zawartych w metatagach do zbierania informacji. Jednym z przykładów jest OpenGraph Facebooka. Wstrzykiwanie metatagów do głowy jest potrzebne, gdy nie masz bezpośredniego dostępu do źródłowego kodu HTML, czy to z winy CMS, czy też dlatego, że sam piszesz dodatek / wstrzyknięcie javascript.
conceptDawg
Zauważ, że możliwe jest, że <meta>dynamiczne dodawanie tagów nie przyniesie żadnego efektu, w zależności od tego, czym one są i jakiej przeglądarki dotyczy.
Pointy
Słuszna

Odpowiedzi:

149

Możesz go wybrać i dodać do niego jak zwykle:

$('head').append('<link />');
nickf
źródło
2
jak mogę kontrolować zamówienie, gdzie zostanie umieszczony ten link
Jitendra Vyas
7
Przeczytaj dokumentację: docs.jquery.com/Manipulation insertBefore , insertAfterto jest to, czego chcesz.
nickf
3
Umieściłem to w dokumencie. Już, ale nie dodaje się do treści mojej głowy
serpent403
To dodanie linku, ale link nie jest wyświetlany w widoku strony Źródło ... Mogę to wyświetlić z narzędzi programistycznych przeglądarki, takich jak Firebug. Czy mogę wyświetlić link również w widoku źródła?
Pankaj Tiwari
4
@PankajTiwari Nie zobaczysz tego w widoku źródła, ponieważ kod dołącza go do bieżącego dokumentu, a nie do oryginalnego źródła (które zostało dostarczone przez serwer). Dlatego narzędzia FireBug i Chrome Dev są tak przydatne.
Bernhard Hofmann
129

JavaScript:

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

Utwórz element DOM w ten sposób:

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

document.getElementsByTagName('head')[0].appendChild(link);
Joshua Woodward
źródło
1
Działa z elementami skryptów!
Ray Foss
26

jQuery

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

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );
David Hedlund
źródło
5
czy appendChild nie wymaga elementu DOM? to znaczy. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);
fredrik
2
No tak. Po prostu zostawiłem tę część, ...ponieważ nie uważałem, że jest to centralna część pytania, a także, w momencie pisania, nie było praktycznego przykładu, co chciałby umieścić w głowie. ale tak, musi to być element DOM.
David Hedlund
10

Możesz użyć, innerHTMLaby po prostu połączyć dodatkowy ciąg pola;

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

Nie możesz jednak zagwarantować, że dodatkowe rzeczy, które dodasz do głowy, zostaną rozpoznane przez przeglądarkę po pierwszym załadowaniu i możliwe jest, że otrzymasz FOUC (flash niezmienionej treści) podczas ładowania dodatkowych arkuszy stylów.

Nie patrzyłem na API od lat, ale możesz też użyć document.write, co zostało zaprojektowane do tego rodzaju działań. Wymagałoby to jednak zablokowania renderowania strony do czasu zakończenia pierwszego żądania AJAX.

Jivings
źródło
9

W najnowszych przeglądarkach (IE9 +) możesz również użyć document.head :

Przykład:

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);
Benny Neugebauer
źródło
9

Utwórz element tymczasowy (np. DIV), Przypisz kod HTML do jego innerHTMLwłaściwości, a następnie dołącz po kolei jego węzły potomne do HEADelementu. Na przykład tak:

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);
}

W porównaniu z przepisywaniem całej HEADzawartości za pośrednictwem jej innerHTML, nie wpłynęłoby to HEADw żaden sposób na istniejące elementy potomne elementu.

Zauważ, że skrypty wstawione w ten sposób najwyraźniej nie są wykonywane automatycznie, podczas gdy style są pomyślnie stosowane. Więc jeśli potrzebujesz skryptów do wykonania, powinieneś załadować pliki JS za pomocą Ajax, a następnie wykonać ich zawartość za pomocą eval().

Marat Tanalin
źródło
Tak to robię w tagu body, ale czy naprawdę można to zrobić wewnątrz head-tagu? Byłem pod wrażeniem, że tylko dozwolone tagi gdzie base, link, meta, title, stylei script?
mb897038
AFAICT, masz dokładnie te elementy w swojej odpowiedzi Ajax. Prawda?
Marat Tanalin
Rzeczywiście, ale nadal nie mogę sprawić, by działało z elementem div wewnątrz tagu head. Wygląda na to, że Chrome jest wystarczająco „inteligentny”, aby i tak wyświetlać zawartość elementu div w treści.
mb897038
2
Prawdopodobnie nie przeczytałeś uważnie odpowiedzi. ;-) DIVElement jest tylko tymczasowym kontenerem na potrzeby parsowania kodu HTML . Nie powinieneś wstawiać DIVsamego siebie do HEAD. Powinieneś wstawić jego węzły podrzędne . Zobacz przykład, który dodałem do odpowiedzi.
Marat Tanalin
1
@GaetanL. „Chociaż wewnątrz tempelementu są elementy podrzędne ”. Zobacz dokumentację Node.firstChild () .
Marat Tanalin
4

Wypróbuj czysty javascript:

Biblioteka JS:

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

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

lub jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));
KingRider
źródło
-5

W jquery masz inną opcję:

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

tak czy owak to działa. Opcja JavaScript, o której inni mówili, też jest poprawna.

Dave
źródło
2
Spowoduje to usunięcie istniejącej treści i wygenerowanie nowych elementów. Może to mieć niepożądane skutki uboczne, takie jak utrata dynamicznie ustawionych właściwości DOM i ponowne wykonanie skryptów.
Quentin,
z tego powodu powinieneś użyć przed $ ('head'). html (), aby odzyskać wszystkie właściwości DOM
Dave,
1
Użycie .html()nie przywróci wszystkich właściwości DOM. (Najczęstszym i najbardziej widocznym przykładem tego problemu jest używanie podobnego kodu do dodawania nowych pól do formularza. Atrybut value reprezentuje domyślną wartość pola, więc pobranie html()i ustawienie z powrotem spowoduje zresetowanie wszystkich istniejących pola do ich wartości domyślnych).
Quentin,
Jestem pewien, że przetestowałem go w moim kodzie i działa, a wszystkie właściwości DOM działają. Proszę, sprawdź się, pracuję IE11
Dave
Rzeczy, które można usunąć, są również wydarzeniami.
Hydroper