jQuery/javascript ile <head> içine herhangi bir şeyi nasıl eklerim?

Bir CMS ile çalışıyorum, bu da <head> öğesinin HTML kaynağını düzenlemeyi engelliyor.

Örneğin, <title> etiketinin üzerine aşağıdakileri eklemek istiyorum:

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

Cevap #1

Bunu seçebilir ve normal şekilde ekleyebilirsiniz:

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

Cevap #2

JavaScript:

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

DOM öğesini şöyle yap:

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

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

Cevap #3

jQuery

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

JavaScript:

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

Cevap #4

innerHTML'i sadece ek alan dizgesini birleştirmek için kullanabilirsiniz;

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

Ancak, başa eklediğiniz ekstra şeylerin tarayıcı tarafından ilk yüklemeden sonra tanınacağını garanti edemezsiniz ve ekstra stil dosyaları yüklenirken FOUC (stil uygulanmamış içerik flaşı) almanız olasıdır.

Yıllardır API'ye bakmadım, ama bu tür bir işlem için tasarlanmış olan document.write kullanabilirsiniz. Ancak, bunu yapmak, ilk AJAX isteğiniz tamamlanana kadar sayfanın render edilmesini engellemenizi gerektirir.

Cevap #5

En son tarayıcılarda (IE9+) ayrıca document.head'i de kullanabilirsiniz:

Örnek:

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

Cevap #6

Geçici bir öğe oluşturun (ör. DIV), HTML kodunuzu onun innerHTML özelliğine atayın ve ardından alt düğümlerini HEAD öğesine tek tek ekleyin. Örneğin, şöyle:

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

HEAD içeriğini innerHTML aracılığıyla tamamen yeniden yazmayla karşılaştırıldığında, bu mevcut HEAD öğesinin alt öğelerini hiçbir şekilde etkilemez.

Bu şekilde eklenen scriptlerin otomatik olarak çalıştırılmadığını, ancak stillerin başarıyla uygulandığını unutmayın. Yani scriptlerin çalıştırılmasını istiyorsanız, JS dosyalarını Ajax ile yüklemeli ve ardından içeriklerini eval() kullanarak çalıştırmalısınız.

İlgili makaleler