Wie füge ich etwas in <head> über jquery / javascript hinzu?

102

Ich arbeite mit einem CMS, das das Bearbeiten der HTML-Quelle für <head>Elemente verhindert.

Zum Beispiel möchte ich über dem <title>Tag Folgendes hinzufügen :

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

— Jitendra Vyas
quelle

8

Das macht keinen Sinn ... Der Kopf wird vor der Ausführung von Javascript analysiert. Das Hinzufügen von Meta-Stuf zum Kopf über Javascript hätte nicht den gewünschten Effekt.

— Andre Haverdings

1

@ Mickel - ja. Antworten auf alle Fragen helfen mir

— Jitendra Vyas

2

Obwohl dies nicht mit der CMS-Frage zusammenhängt, kann es unter bestimmten Umständen sinnvoll sein, Meta-Tags hinzuzufügen. Es gibt verschiedene Browser-Addons und Javascript-Injektionen, die Daten in den Meta-Tags verwenden, um Informationen zu sammeln. Facebooks OpenGraph ist ein Beispiel. Das Injizieren von Meta-Tags in den Kopf ist erforderlich, wenn Sie keinen direkten Zugriff auf das ursprüngliche HTML haben, sei es aufgrund eines CMS oder weil Sie selbst ein Javascript-Addon / eine Javascript-Injection schreiben.

— KonzeptDawg

Beachten Sie, dass das <meta>dynamische Hinzufügen von Tags möglicherweise keine Auswirkungen hat, je nachdem , um welche Tags es sich handelt und um welchen Browser es sich handelt.

— Pointy

Guter Punkt, das passiert, wenn man sich zu sehr auf das Problem konzentriert ;-)

— mb897038

149

Sie können es wie gewohnt auswählen und hinzufügen:

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

— nickf
quelle

2

Wie kann ich die Reihenfolge steuern, in der dieser Link platziert wird

— Jitendra Vyas

7

Lesen Sie die Dokumentation: docs.jquery.com/Manipulation insertBefore , insertAfterist das , was Sie wollen.

— Nickf

3

Ich habe dies bereits in document.ready

— eingefügt

Es wird ein Link hinzugefügt, aber der Link wird in der Seitenansicht nicht angezeigt. Quelle ... Ich kann ihn mit Browser-Entwicklungstools wie Firebug anzeigen. Kann ich den Link auch in der Ansichtsquelle anzeigen?

— Pankaj Tiwari

4

@PankajTiwari In der Quellansicht wird es nicht angezeigt, da der Code es an das aktuelle Dokument anfügt, nicht an die ursprüngliche Quelle (die vom Server bereitgestellt wurde). Deshalb sind FireBug- und Chrome Dev-Tools so nützlich.

— Bernhard Hofmann

129

JavaScript:

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

Machen Sie das DOM-Element so:

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

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

— Joshua Woodward
quelle

1

Funktioniert mit Skriptelementen!

— Ray Foss

26

jQuery

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

JavaScript:

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

— David Hedlund
quelle

5

Benötigt appendChild kein DOM-Element? dh. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— Fredrik

2

Nun ja. Ich habe diesen Teil einfach verlassen, ...weil ich nicht der Meinung war, dass dies ein zentraler Teil der Frage ist, und zum Zeitpunkt des Schreibens gab es auch kein praktisches Beispiel dafür, was er in den Kopf setzen wollte. aber ja, es muss ein DOM-Element sein.

— David Hedlund

10

Sie können innerHTMLnur die zusätzliche Feldzeichenfolge verwenden.

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

Sie können jedoch nicht garantieren, dass die zusätzlichen Dinge, die Sie dem Kopf hinzufügen, nach dem ersten Laden vom Browser erkannt werden, und es ist möglich, dass Sie beim Laden der zusätzlichen Stylesheets eine FOUC (Flash von nicht gestylten Inhalten) erhalten.

Ich habe mir die API seit Jahren nicht mehr angesehen, aber Sie können sie auch verwenden document.write, was für diese Art von Aktion entwickelt wurde. Dies würde jedoch erfordern, dass Sie das Rendern der Seite blockieren, bis Ihre erste AJAX-Anforderung abgeschlossen ist.

— Jivings
quelle

9

In den neuesten Browsern (IE9 +) können Sie auch document.head verwenden :

Beispiel:

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
quelle

9

Erstellen Sie ein temporäres Element (z. B. DIV), weisen Sie der innerHTMLEigenschaft Ihren HTML-Code zu und hängen Sie die untergeordneten KnotenHEAD nacheinander an das Element an. Zum Beispiel so:

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

Verglichen mit dem Umschreiben des gesamten HEADInhalts über sein innerHTMLwürde dies keine Auswirkungen auf vorhandene untergeordnete Elemente des HEADElements haben.

Beachten Sie, dass auf diese Weise eingefügte Skripte anscheinend nicht automatisch ausgeführt werden, während Stile erfolgreich angewendet werden. Wenn Sie also Skripte ausführen müssen , sollten Sie JS-Dateien mit Ajax laden und deren Inhalt dann mit ausführen eval().

— Marat Tanalin
quelle

So mache ich das im body, aber kann das wirklich im head-tag gemacht werden? Ich habe den Eindruck , dass die einzigen erlaubten Tags , wo base, link, meta, title, styleund script?

— mb897038

AFAICT, Sie haben genau diese Elemente in Ihrer Ajax-Antwort. Nicht wahr?

— Marat Tanalin

In der Tat, aber ich kann es immer noch nicht mit einem Div im Head-Tag zum Laufen bringen. Es scheint, dass Chrome "intelligent" genug ist, um den Inhalt des Div im Körper trotzdem anzuzeigen.

— mb897038

2

Sie haben die Antwort wahrscheinlich nicht sorgfältig gelesen. ;-) Das DIVElement ist nur ein temporärer Container zum Parsen von HTML-Code . Sie sollten das DIVselbst nicht in das einfügen HEAD. Sie sollten die untergeordneten Knoten einfügen . Bitte beachten Sie das Beispiel, das ich der Antwort hinzugefügt habe.

— Marat Tanalin

1

@ GaetanL. "Während sich untergeordnete Elemente im tempElement befinden." Siehe Node.firstChild () -Dokumente .

— Marat Tanalin

4

Versuchen Sie es mit einem reinen Javascript:

Bibliothek JS:

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

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

oder jQuery:

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

— KingRider
quelle

-5

Mit jquery haben Sie andere Möglichkeiten:

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

sowieso funktioniert es. JavaScript-Option, sagten andere, das ist auch richtig.

— Dave
quelle

2

Dadurch werden die vorhandenen Inhalte gelöscht und neue Elemente generiert. Dies kann unerwünschte Nebenwirkungen haben, z. B. den Verlust dynamisch festgelegter DOM-Eigenschaften und die erneute Ausführung von Skripten.

— Quentin

Aus diesem Grund sollten Sie vor $ ('head'). html () verwenden, um alle DOM-Eigenschaften wiederherzustellen

— Dave

1

Mit .html()wird nicht alle DOM-Eigenschaften wiederhergestellt . (Die häufigste und sichtbarste Instanz dieses Problems ist die Verwendung von ähnlichem Code zum Hinzufügen neuer Felder zu einem Formular. Das value-Attribut stellt den Standardwert eines Felds dar. Wenn Sie es also abrufen html()und dann zurücksetzen, werden alle vorhandenen zurückgesetzt Felder auf ihre Standardwerte).

— Quentin

Ich kann sicher sein, dass ich es in meinem Code getestet habe und es funktioniert und alle DOM-Eigenschaften funktionieren. Bitte testen Sie sich selbst, ich arbeite IE11

— Dave

Dinge, die entfernt werden können, sind auch Ereignisse.

— Hydroper