Como adicionar qualquer coisa em <head> através de jquery / javascript?

102

Estou trabalhando com um CMS, que impede a edição de código-fonte HTML para o <head>elemento.

Por exemplo, quero adicionar o seguinte acima da <title>tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
javascript jquery css xhtml Jitendra Vyas
fonte
8
Isso não faz sentido ... A cabeça é analisada antes da execução do javascript. Adicionar meta stuf à cabeça via javascript não teria o efeito desejado.
Andre Haverdings
1
@Mickel - sim. as respostas de todas as perguntas me ajudam
Jitendra Vyas
2
Embora não esteja relacionado à questão do CMS, pode fazer sentido adicionar metatags em certas circunstâncias. Existem vários complementos de navegador e injeções de javascript que usam dados que estão nas metatags para coletar informações. O OpenGraph do Facebook é um exemplo. A injeção de meta tags no cabeçalho é necessária quando você não tem acesso direto ao HTML de origem, seja por falha de um CMS ou porque você mesmo está escrevendo um complemento / injeção de javascript.
conceptDawg
Observe que é possível que adicionar <meta>tags dinamicamente não tenha efeito, dependendo do que são e de qual navegador está envolvido.
Pointy
Bom ponto, isso é o que acontece quando alguém se concentra demais no problema ;-)
mb897038

Respostas:

149

Você pode selecioná-lo e adicioná-lo normalmente:

$('head').append('<link />');
nickf
fonte
2
como posso controlar o pedido, onde este link será colocado
Jitendra Vyas
7
Leia a documentação: docs.jquery.com/Manipulation insertBefore , insertAfteré o que você deseja.
nickf
3
Eu coloquei isso em document.ready, mas não acrescenta ao conteúdo do meu cabeçalho
serpent403
Ele está adicionando um link, mas o link não aparece na visualização da página Fonte ... Posso visualizá-lo em ferramentas de desenvolvimento de navegador como o Firebug. Posso ver o link na fonte de exibição também?
Pankaj Tiwari
4
@PankajTiwari Você não o verá na visualização do código-fonte porque o código o anexa ao documento atual, não ao código-fonte original (que foi fornecido pelo servidor). É por isso que as ferramentas FireBug e Chrome Dev são tão úteis.
Bernhard Hofmann
129

JavaScript:

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

Faça o elemento DOM assim:

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

document.getElementsByTagName('head')[0].appendChild(link);
Joshua Woodward
fonte
1
Funciona com elementos de script!
Ray Foss
26

jQuery

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

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );
David Hedlund
fonte
5
não appendChild requer um elemento DOM? ie. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);
Fredrik
2
bem, sim. Acabei de sair dessa parte ...porque não senti que fosse uma parte central da questão e também, no momento em que este artigo foi escrito, não havia nenhum exemplo prático sobre o que ele queria colocar em mente. mas sim, ele precisa ser um elemento DOM.
David Hedlund
10

Você pode usar innerHTMLapenas para concat a string de campo extra;

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

No entanto, você não pode garantir que as coisas extras que você adicionar ao cabeçote serão reconhecidas pelo navegador após o primeiro carregamento, e é possível que você obtenha um FOUC (flash de conteúdo não estilizado) conforme as folhas de estilo extras são carregadas.

Não vejo a API há anos, mas você também pode usar document.write, que é o que foi projetado para esse tipo de ação. No entanto, isso exigiria que você bloqueie a renderização da página até que sua solicitação AJAX inicial seja concluída.

Jivings
fonte
9

Nos navegadores mais recentes (IE9 +), você também pode usar document.head :

Exemplo:

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

Crie um elemento temporário (por exemplo DIV), atribua seu código HTML à sua innerHTMLpropriedade e, em seguida, anexe seus nós filhos ao HEADelemento, um por um. Por exemplo, assim:

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

Em comparação com a reescrita de todo o HEADconteúdo por meio de seu innerHTML, isso não afetaria os elementos filhos existentes do elemento de HEADforma alguma.

Observe que os scripts inseridos dessa forma aparentemente não são executados automaticamente, enquanto os estilos são aplicados com sucesso. Portanto, se você precisar que scripts sejam executados, deve carregar os arquivos JS usando Ajax e, em seguida, executar seu conteúdo usando eval().

Marat Tanalin
fonte
É assim que eu faço no body, mas isso pode realmente ser feito dentro da head-tag? Fiquei com a impressão de que as tags só é permitido, onde base, link, meta, title, stylee script?
mb897038
AFAICT, você tem exatamente esses elementos em sua resposta Ajax. Não é?
Marat Tanalin de
De fato, mas ainda não consigo fazer funcionar com uma div dentro da tag de cabeça. Parece que o Chrome é "inteligente" o suficiente para exibir o conteúdo do div no corpo de qualquer maneira.
mb897038
2
Você provavelmente não leu a resposta com atenção. ;-) O DIVelemento é apenas um contêiner temporário com o propósito de analisar o código HTML . Você não deve inserir o DIVpróprio no HEAD. Você deve inserir seus nós filhos . Veja o exemplo que adicionei à resposta.
Marat Tanalin
1
@GaetanL. “Embora existam elementos filho dentro do tempelemento.” Veja a documentação de Node.firstChild () .
Marat Tanalin
4

Experimente um 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"/>');

ou jQuery:

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

Com jquery, você tem outra opção:

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

de qualquer maneira, está funcionando. Opção JavaScript, outros disseram, isso também é correto.

Dave
fonte
2
Isso excluirá o conteúdo existente e gerará novos elementos. Isso pode ter efeitos colaterais indesejáveis, como perda de propriedades DOM definidas dinamicamente e fazer com que os scripts sejam executados novamente.
Quentin
por esta razão, você deve usar antes de $ ('head'). html () para recuperar todas as propriedades DOM
Dave
1
O uso .html()não recuperará todas as propriedades DOM. (A instância mais comum desse problema, e a mais visível, é ao usar código semelhante para adicionar novos campos a um formulário. O atributo value representa o valor padrão de um campo, portanto, obtê-lo html()e defini-lo de volta irá redefinir todos os campos para seus valores padrão).
Quentin
Tenho certeza que testei no meu código e está funcionando e todas as propriedades do DOM funcionam. Por favor, teste-se, estou trabalhando no IE11
Dave
Coisas que podem ser removidas também são eventos.
Hydroper