Comment ajouter quelque chose dans <head> via jquery / javascript?

102

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

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

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

— Jitendra Vyas
source

8

Cela n'a aucun sens ... La tête est analysée avant l'exécution de javascript. L'ajout de meta stuf à la tête via javascript n'aurait pas l'effet souhaité.

— Andre Haverdings

1

@Mickel - oui. les réponses de toutes les questions

— m'aident

2

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

— conceptDawg

Notez qu'il est possible que l'ajout <meta>dynamique de balises n'ait aucun effet, selon ce qu'elles sont et le navigateur impliqué.

— Pointy

Bon point, c'est ce qui arrive quand on se concentre trop sur le problème ;-)

— mb897038

149

Vous pouvez le sélectionner et y ajouter comme d'habitude:

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

— nickf
source

2

comment puis-je contrôler l'ordre, où ce lien sera placé

— Jitendra Vyas

7

Lisez la documentation: docs.jquery.com/Manipulation insertBefore , insertAfterc'est ce que vous voulez.

— nickf

3

Je l'ai mis dans document.ready, mais il n'ajoute pas à mon contenu principal

— serpent403

Il ajoute un lien, mais le lien n'apparaît pas dans la vue de la page Source ... Je peux le voir à partir d'outils de développement de navigateur comme Firebug. Puis-je voir le lien dans la vue source également?

— Pankaj Tiwari

4

@PankajTiwari Vous ne le verrez pas dans la vue source car le code l'ajoute au document actuel, pas à la source d'origine (qui a été fournie par le serveur). C'est pourquoi les outils FireBug et Chrome Dev sont si utiles.

— Bernhard Hofmann

129

JavaScript:

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

Créez un élément DOM comme ceci:

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

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

— Joshua Woodward
source

1

Fonctionne avec des éléments de script!

— Ray Foss

26

jQuery

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

JavaScript:

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

— David Hedlund
source

5

vous n'avez pas besoin d'un élément DOM pour appendChild? c'est à dire. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— fredrik

2

Hé bien oui. Je viens de laisser cette partie ...parce que je ne pensais pas que c'était une partie centrale de la question, et aussi, au moment de la rédaction de cet article, il n'y avait pas d'exemple pratique de ce qu'il voulait mettre en tête. mais oui, il doit s'agir d'un élément DOM.

— David Hedlund

10

Vous pouvez utiliser innerHTMLpour concaténer simplement la chaîne de champ supplémentaire;

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

Cependant, vous ne pouvez pas garantir que les éléments supplémentaires que vous ajoutez à la tête seront reconnus par le navigateur après le premier chargement, et il est possible que vous obteniez un FOUC (flash de contenu non stylisé) lorsque les feuilles de style supplémentaires sont chargées.

Je n'ai pas regardé l'API depuis des années, mais vous pouvez également l'utiliser document.write, ce qui a été conçu pour ce type d'action. Cependant, cela vous obligerait à bloquer le rendu de la page jusqu'à ce que votre requête AJAX initiale soit terminée.

— Jivings
source

9

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

Exemple:

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
source

9

Créez un élément temporaire (par exemple DIV), affectez votre code HTML à sa innerHTMLpropriété, puis ajoutez ses nœuds enfants à l' HEADélément un par un. Par exemple, comme ceci:

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

Comparé à la réécriture du HEADcontenu entier via son innerHTML, cela n'affecterait en rien les éléments enfants existants de l' HEADélément.

Notez que les scripts insérés de cette manière ne sont apparemment pas exécutés automatiquement, tandis que les styles sont appliqués avec succès. Donc, si vous avez besoin d'exécuter des scripts, vous devez charger les fichiers JS en utilisant Ajax , puis exécuter leur contenu en utilisant eval().

— Marat Tanalin
source

C'est comme ça que je le fais dans le body, mais cela peut-il vraiment être fait à l'intérieur du head-tag? J'avais l'impression que les balises admis que si base, link, meta, title, styleet script?

— mb897038

AFAICT, vous avez exactement ces éléments dans votre réponse Ajax. Pas toi?

— Marat Tanalin

En effet, mais je ne peux toujours pas le faire fonctionner avec un div à l'intérieur de la balise head. Il semble que Chrome soit suffisamment "intelligent" pour afficher le contenu du div dans le corps de toute façon.

— mb897038

2

Vous n'avez probablement pas lu la réponse attentivement. ;-) L' DIVélément est juste un conteneur temporaire dans le but d' analyser le code HTML . Vous ne devez pas insérer le DIVlui - même dans le fichier HEAD. Vous devez insérer ses nœuds enfants . Veuillez consulter l'exemple que j'ai ajouté à la réponse.

— Marat Tanalin

1

@GaetanL. "Bien qu'il y ait des éléments enfants à l'intérieur de l' tempélément." Voir la documentation sur Node.firstChild () .

— Marat Tanalin le

4

Essayez un javascript pur:

Bibliothèque JS:

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

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

ou jQuery:

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

— KingRider
source

-5

Avec jquery, vous avez une autre option:

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

de toute façon ça marche. Option JavaScript d'autres ont dit, c'est correct aussi.

— Dave
source

2

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 des scripts.

— Quentin

pour cette raison, vous devriez utiliser avant $ ('head'). html () pour récupérer toutes les propriétés DOM

— Dave

1

L'utilisation .html()ne récupérera pas toutes les propriétés DOM. (L'instance la plus courante de ce problème, et la plus visible, est lorsque vous utilisez un code similaire pour ajouter de nouveaux champs à un formulaire. L'attribut value représente la valeur par défaut d'un champ, donc l'obtenir html()puis le redéfinir réinitialisera tous les champs existants. champs à leurs valeurs par défaut).

— Quentin

Je peux vous assurer que je l'ai testé dans mon code et que cela fonctionne et que toutes les propriétés DOM fonctionnent. S'il vous plaît, testez-vous, je travaille IE11

— Dave

Les choses qui peuvent être supprimées sont également des événements.

— Hydroper