Come aggiungere qualcosa in <head> tramite jquery / javascript?

102

Sto lavorando con un CMS, che impedisce la modifica del sorgente HTML per l' <head>elemento.

Ad esempio, voglio aggiungere quanto segue sopra il <title>tag:

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

— Jitendra Vyas
fonte

8

Questo non ha senso ... L'head viene analizzato prima dell'esecuzione di javascript. L'aggiunta di meta stuf alla testina tramite javascript non avrebbe l'effetto desiderato.

— Andre Haverdings

1

@Mickel - sì. le risposte a tutte le domande mi aiutano

— Jitendra Vyas

2

Sebbene non sia correlato alla domanda CMS, può avere senso aggiungere meta tag in determinate circostanze. Esistono vari componenti aggiuntivi del browser e iniezioni di javascript che utilizzano i dati presenti nei metatag per raccogliere informazioni. OpenGraph di Facebook è un esempio. L'iniezione di meta tag nella testina è necessaria quando non si ha accesso diretto all'HTML di origine, sia per colpa di un CMS o perché si sta scrivendo un addon / injection javascript da soli.

— conceptDawg

Tieni presente che è possibile che l'aggiunta di <meta>tag dinamicamente non abbia alcun effetto, a seconda di cosa sono e di quale browser è coinvolto.

— Pointy

Buon punto, ecco cosa succede quando ci si concentra troppo sul problema ;-)

— mb897038

149

Puoi selezionarlo e aggiungerlo normalmente:

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

— nickf
fonte

2

come posso controllare l'ordine, dove verrà posizionato questo collegamento

— Jitendra Vyas

7

Leggi la documentazione: docs.jquery.com/Manipulation insertBefore , insertAfterè quello che vuoi.

— nickf

3

L'ho già inserito in document.ready, ma non si aggiunge al contenuto della mia testa

— serpent403

Sta aggiungendo un collegamento, ma il collegamento non viene visualizzato nella vista della pagina Sorgente ... Posso visualizzarlo da strumenti di sviluppo del browser come Firebug. Posso visualizzare il collegamento anche nella sorgente di visualizzazione?

— Pankaj Tiwari

4

@PankajTiwari Non lo vedrai nella vista sorgente perché il codice lo aggiunge al documento corrente, non alla sorgente originale (che è stata fornita dal server). Ecco perché gli strumenti FireBug e Chrome Dev sono così utili.

— Bernhard Hofmann

129

JavaScript:

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

Crea l'elemento DOM in questo modo:

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

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

— Joshua Woodward
fonte

1

Funziona con elementi di script!

— Ray Foss

26

jQuery

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

JavaScript:

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

— David Hedlund
fonte

5

appendChild non richiede un elemento DOM? vale a dire. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— fredrik

2

Beh si. Ho semplicemente lasciato quella parte ...perché non sentivo che fosse una parte centrale della domanda, e inoltre, al momento della stesura, non c'erano esempi pratici di ciò che voleva mettere in testa. ma sì, deve essere un elemento DOM.

— David Hedlund

10

Puoi usare innerHTMLsolo per concatenare la stringa di campo extra;

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

Tuttavia, non puoi garantire che le cose extra che aggiungi alla testa saranno riconosciute dal browser dopo il primo caricamento, ed è possibile che otterrai un FOUC (flash di contenuto non stilato) mentre vengono caricati i fogli di stile extra.

Non guardo l'API da anni, ma potresti anche usarla document.write, che è ciò che è stato progettato per questo tipo di azione. Tuttavia, ciò richiederebbe di bloccare il rendering della pagina fino al completamento della richiesta AJAX iniziale.

— Jivings
fonte

9

Negli ultimi browser (IE9 +) puoi anche usare document.head :

Esempio:

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
fonte

9

Creare un elemento temporaneo (e. G. DIV), Assegnare il codice HTML per la sua innerHTMLproprietà, e quindi aggiungere i suoi nodi figlio al HEADelemento uno per uno. Ad esempio, in questo modo:

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

Rispetto alla riscrittura dell'intero HEADcontenuto tramite il suo innerHTML, ciò non influirebbe HEADin alcun modo sugli elementi figlio esistenti dell'elemento.

Notare che gli script inseriti in questo modo apparentemente non vengono eseguiti automaticamente, mentre gli stili vengono applicati correttamente. Quindi, se hai bisogno di script da eseguire, dovresti caricare i file JS usando Ajax e quindi eseguire i loro contenuti usando eval().

— Marat Tanalin
fonte

È così che lo faccio nel body, ma può davvero essere fatto all'interno del headtag? Ho avuto l'impressione che i tag consentito solo in cui base, link, meta, title, stylee script?

— mb897038

AFAICT, hai esattamente quegli elementi nella tua risposta Ajax. Vero?

— Marat Tanalin

In effetti, ma non riesco ancora a farlo funzionare con un div all'interno del tag head. Sembra che Chrome sia abbastanza "intelligente" da visualizzare comunque il contenuto del div nel corpo.

— mb897038

2

Probabilmente non hai letto attentamente la risposta. ;-) L' DIVelemento è solo un contenitore temporaneo allo scopo di analizzare il codice HTML . Non dovresti inserire lo DIVstesso nel file HEAD. Dovresti inserire i suoi nodi figlio . Si prega di vedere l'esempio che ho aggiunto alla risposta.

— Marat Tanalin

1

@GaetanL. "Mentre ci sono elementi figlio all'interno tempdell'elemento." Vedere la documentazione di Node.firstChild () .

— Marat Tanalin

4

Prova un javascript puro:

Libreria JS:

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

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

o jQuery:

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

— KingRider
fonte

-5

Con jquery hai altre opzioni:

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

comunque funziona. Opzione JavaScript che altri hanno detto, anche questa è corretta.

— Dave
fonte

2

Ciò eliminerà il contenuto esistente e genererà nuovi elementi. Ciò può avere effetti collaterali indesiderati come la perdita delle proprietà DOM impostate dinamicamente e la riesecuzione degli script.

— Quentin

per questo motivo dovresti usare prima di $ ('head'). html () per recuperare tutte le proprietà DOM

— Dave

1

L'utilizzo .html()non ripristinerà tutte le proprietà DOM. (L'istanza più comune di questo problema, e la più visibile, è quando si utilizza un codice simile per aggiungere nuovi campi a un modulo. L'attributo value rappresenta il valore predefinito di un campo, quindi recuperarlo html()e reimpostarlo ripristinerà tutti i campi esistenti campi ai valori predefiniti).

— Quentin

Posso sicuro che l'ho testato nel mio codice e funziona e tutte le proprietà DOM funzionano. Per favore, mettiti alla prova, sto lavorando IE11

— Dave

Anche le cose che possono essere rimosse sono eventi.

— Hydroper