Comment ajouter quelque chose dans <head> à l'aide de jquery/javascript ?

Question

Comment ajouter quelque chose dans <head> à l'aide de jquery/javascript ?

Demandé el 14 de Décembre, 2009: Quand la question a-t-elle été
79371 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je travaille avec un CMS, qui empêche l'édition de la source HTML pour les <head> élément.

Par exemple, je souhaite ajouter ce qui suit au-dessus de la rubrique <title> étiquette :

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

Demandé el 14 de Décembre, 2009 par Jitendra Vyas

8 votes

Cela n'a pas de sens... L'en-tête est analysé avant l'exécution du javascript. L'ajout de meta stuf à l'en-tête via javascript n'aurait pas l'effet désiré.

Commenté el 14 de Décembre, 2009 par Andre Haverdings

1 votes

@Mickel - Oui. Les réponses à toutes les questions m'aident.

Commenté el 14 de Décembre, 2009 par Jitendra Vyas

2 votes

Bien que cela ne soit pas lié à la question du CMS, il peut être judicieux d'ajouter des balises méta dans certaines circonstances. Il existe divers modules complémentaires de navigateur et injections javascript qui utilisent les données contenues dans les balises méta pour collecter des informations. OpenGraph de Facebook en est un exemple. L'injection de métabalises dans l'en-tête est nécessaire lorsque vous n'avez pas d'accès direct au code HTML d'origine, que ce soit par la faute d'un CMS ou parce que vous écrivez vous-même un addon/injection javascript.

Commenté el 1 de Février, 2011 par conceptDawg

Afficher 3 autres commentaires

Answer 1

5 Réponses

Answer 2

172voto

nickf Points 185423

Vous pouvez le sélectionner et l'enrichir comme d'habitude :

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

Répondu el 14 de Décembre, 2009 par nickf (185423 Points )

2 votes

Comment puis-je contrôler l'ordre dans lequel ce lien sera placé ?

Commenté el 14 de Décembre, 2009 par Jitendra Vyas

8 votes

Lire la documentation : docs.jquery.com/Manipulation insertBefore , insertAfter est ce que vous voulez.

Commenté el 14 de Décembre, 2009 par nickf

3 votes

J'ai placé ceci dans document.ready, mais cela ne s'ajoute pas au contenu de mon en-tête

Commenté el 2 de Mai, 2012 par serpent403

Afficher 6 autres commentaires

Answer 3

157voto

Joshua Woodward Points 449

JavaScript :

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

Créez l'élément DOM comme suit :

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

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

Répondu el 29 de Novembre, 2011 par Joshua Woodward (449 Points )

1 votes

Fonctionne avec les éléments script !

Commenté el 19 de Septembre, 2016 par Ray

Answer 4

33voto

David Hedlund Points 66192

JQuery

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

JavaScript :

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

Répondu el 14 de Décembre, 2009 par David Hedlund (66192 Points )

5 votes

AppendChild ne nécessite-t-il pas un élément DOM ? var elem = document.createElement() document.getElementsByTagName('head')[0].appendChild( elem ) ;

Commenté el 14 de Décembre, 2009 par fredrik

2 votes

Oui, j'ai juste laissé cette partie comme ... parce que je n'avais pas l'impression que c'était un élément central de la question, et aussi, au moment de la rédaction, il n'y avait pas d'exemple pratique de ce qu'il voulait mettre dans la tête. mais oui, il faut que ce soit un élément DOM.

Commenté el 14 de Décembre, 2009 par David Hedlund

Answer 5

11voto

Benny Neugebauer Points 5393

Dans les navigateurs les plus récents (IE9+), vous pouvez également utiliser document.head :

Ejemplo:

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

Répondu el 25 de Mars, 2014 par Benny Neugebauer (5393 Points )

Answer 6

-6voto

Dave Points 34

Avec jquery, vous avez d'autres possibilités :

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

Quoi qu'il en soit, cela fonctionne. L'option JavaScript, comme d'autres l'ont dit, est également correcte.

Répondu el 14 de Décembre, 2013 par Dave (34 Points )

2 votes

Cela supprimera le contenu existant et générera de nouveaux éléments. Cela peut avoir des effets secondaires indésirables tels que la perte de propriétés DOM définies dynamiquement et la ré-exécution de scripts.

Commenté el 14 de Décembre, 2013 par Quentin

0 votes

C'est pourquoi vous devez utiliser avant $('head').html() pour récupérer toutes les propriétés du DOM.

Commenté el 14 de Décembre, 2013 par Dave

1 votes

Utilisation .html() ne se rétablira pas tous les propriétés du DOM. (L'exemple le plus courant de ce problème, et le plus visible, est l'utilisation d'un code similaire pour ajouter de nouveaux champs à un formulaire. L'attribut value représente la valeur par défaut d'un champ. html() et le rétablir ensuite réinitialisera tous les champs existants à leurs valeurs par défaut).

Commenté el 14 de Décembre, 2013 par Quentin

Afficher 2 autres commentaires

Comment ajouter quelque chose dans <head> à l'aide de jquery/javascript ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment ajouter quelque chose dans <head> à l'aide de jquery/javascript ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: