¿Cómo agregar algo en <head> a través de jquery / javascript?

102

Estoy trabajando con un CMS, que evita la edición de la fuente HTML para el <head>elemento.

Por ejemplo, quiero agregar lo siguiente encima de la <title>etiqueta:

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

— Jitendra Vyas
fuente

8

Esto no tiene sentido ... El encabezado se analiza antes de la ejecución de javascript. Agregar meta Stuf a la cabeza a través de JavaScript no tendría el efecto deseado.

— Andre Haverdings

1

@Mickel - sí. las respuestas a todas las preguntas me ayudan

— Jitendra Vyas

2

Si bien no está relacionado con la pregunta de CMS, puede tener sentido agregar metaetiquetas en ciertas circunstancias. Hay varios complementos de navegador e inyecciones de JavaScript que utilizan datos que se encuentran en las metaetiquetas para recopilar información. OpenGraph de Facebook es un ejemplo. Es necesario inyectar metaetiquetas en la cabeza cuando no tiene acceso directo al HTML de origen, ya sea por culpa de un CMS o porque está escribiendo un complemento / inyección de JavaScript usted mismo.

— conceptDawg

Tenga en cuenta que es posible que agregar <meta>etiquetas dinámicamente no tenga ningún efecto, dependiendo de qué son y qué navegador está involucrado.

— Puntiagudo

Buen punto, eso es lo que sucede cuando uno se centra demasiado en el problema ;-)

— mb897038

149

Puede seleccionarlo y agregarlo como de costumbre:

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

— nickf
fuente

2

¿Cómo puedo controlar el pedido, dónde se colocará este enlace?

— Jitendra Vyas

7

Lea la documentación: docs.jquery.com/Manipulation insertBefore , insertAfteres lo que desea.

— nickf

3

He puesto esto en document.ready, pero no se adjunta al contenido de mi cabeza

— serpent403

Está agregando un enlace, pero el enlace no se muestra en la vista de la página Fuente ... Puedo verlo desde herramientas de desarrollo del navegador como Firebug. ¿Puedo ver el enlace en la fuente de vista también?

— Pankaj Tiwari

4

@PankajTiwari No lo verá en la vista de fuente porque el código lo agrega al documento actual, no a la fuente original (que fue proporcionada por el servidor). Es por eso que las herramientas de desarrollo de FireBug y Chrome son tan útiles.

— Bernhard Hofmann

129

JavaScript:

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

Haga el elemento DOM así:

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

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

— Joshua Woodward
fuente

1

¡Funciona con elementos de script!

— Ray Foss

26

jQuery

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

JavaScript:

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

— David Hedlund
fuente

5

¿No necesita appendChild un elemento DOM? es decir. var elem = document.createElement () document.getElementsByTagName ('cabeza') [0] .appendChild (elem);

— fredrik

2

bueno, sí. Simplemente dejé esa parte ...porque no sentía que fuera una parte central de la pregunta, y además, en el momento de escribir este artículo, no había un ejemplo práctico de lo que él quería poner en la cabeza. pero sí, debe ser un elemento DOM.

— David Hedlund

10

Puede usar innerHTMLpara concatizar la cadena de campo adicional;

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

Sin embargo, no puede garantizar que el navegador reconozca las cosas adicionales que agregue al encabezado después de la primera carga, y es posible que obtenga un FOUC (flash de contenido sin estilo) a medida que se cargan las hojas de estilo adicionales.

No he mirado la API en años, pero también podrías usar document.write, que es lo que fue diseñado para este tipo de acción. Sin embargo, esto requeriría que bloquee la representación de la página hasta que se complete su solicitud AJAX inicial.

— Jivings
fuente

9

En los últimos navegadores (IE9 +) también puede utilizar 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);

— Benny Neugebauer
fuente

9

Cree un elemento temporal (p. Ej. DIV), Asigne su código HTML a su innerHTMLpropiedad y luego agregue sus nodos secundarios al HEADelemento uno por uno. Por ejemplo, así:

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

En comparación con la reescritura del HEADcontenido completo a través de su innerHTML, esto no afectaría a los elementos secundarios existentes del HEADelemento de ninguna manera.

Tenga en cuenta que los scripts insertados de esta manera aparentemente no se ejecutan automáticamente, mientras que los estilos se aplican correctamente. Entonces, si necesita que se ejecuten scripts, debe cargar archivos JS usando Ajax y luego ejecutar su contenido usando eval().

— Marat Tanalin
fuente

Así es como lo hago en el body, pero ¿realmente se puede hacer dentro del head-tag? Yo tenía la impresión de que las etiquetas sólo se admiten en donde base, link, meta, title, styley script?

— mb897038

AFAICT, tiene exactamente esos elementos en su respuesta Ajax. Tu no?

— Marat Tanalin

De hecho, pero todavía no puedo hacer que funcione con un div dentro de la etiqueta de la cabeza. Parece que Chrome es lo suficientemente "inteligente" para mostrar el contenido del div en el cuerpo de todos modos.

— mb897038

2

Probablemente no haya leído la respuesta con atención. ;-) El DIVelemento es solo un contenedor temporal con el propósito de analizar el código HTML . No debe insertar el DIVpropio en el HEAD. Debes insertar sus nodos secundarios . Vea el ejemplo que agregué a la respuesta.

— Marat Tanalin

1

@GaetanL. "Si bien hay elementos secundarios dentro del tempelemento". Consulte la documentación de Node.firstChild () .

— Marat Tanalin

4

Prueba un javascript puro:

Biblioteca JS:

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

Tipo: 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
fuente

-5

Con jquery tienes otra opción:

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

de todos modos está funcionando. Opción de JavaScript que otros dijeron, eso también es correcto.

— Dave
fuente

2

Eso eliminará el contenido existente y generará nuevos elementos. Esto puede tener efectos secundarios no deseados, como perder propiedades DOM establecidas dinámicamente y hacer que los scripts se vuelvan a ejecutar.

— Quentin

por esta razón, debe usar antes de $ ('head'). html () para recuperar todas las propiedades DOM

— Dave

1

El uso .html()no recuperará todas las propiedades DOM. (La instancia más común de este problema, y la más visible, es cuando se usa un código similar para agregar nuevos campos a un formulario. El atributo de valor representa el valor predeterminado de un campo, por lo que obtenerlo html()y luego restablecerlo restablecerá todos los campos existentes. campos a sus valores predeterminados).

— Quentin

Puedo estar seguro de que lo probé en mi código y está funcionando y todas las propiedades DOM funcionan. Por favor, ponte a prueba, estoy trabajando IE11

— Dave

Las cosas que pueden eliminarse también son eventos.

— Hydroper