Jquery / javascript ile <head> içine herhangi bir şey nasıl eklenir?

102

<head>Öğe için HTML kaynağını düzenlemeyi engelleyen bir CMS ile çalışıyorum .

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

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

— Jitendra Vyas
kaynak

8

Bu mantıklı değildir ... Baş javascript çalıştırılmadan önce çözümlenir. Başlığa javascript aracılığıyla meta stuf eklemek istenen etkiyi yaratmayacaktır.

— Andre Haverdings

1

@Mickel - evet. tüm soruların cevapları bana yardımcı oluyor

— Jitendra Vyas

2

CMS sorusuyla ilgili olmasa da, belirli durumlarda meta etiketler eklemek mantıklı olabilir. Bilgi toplamak için meta etiketlerde bulunan verileri kullanan çeşitli tarayıcı eklentileri ve javascript enjeksiyonları vardır. Facebook'un OpenGraph'ı buna bir örnektir. Başa meta etiketlerin enjekte edilmesi, kaynak HTML'ye doğrudan erişiminiz olmadığında, bir CMS hatası nedeniyle veya kendiniz bir javascript eklentisi / enjeksiyonu yazdığınız için gereklidir.

— conceptDawg

<meta>Dinamik olarak etiket eklemenin , ne olduklarına ve hangi tarayıcının dahil olduğuna bağlı olarak hiçbir etkisi olmayabileceğini unutmayın.

— Pointy

İyi bir nokta, soruna çok fazla odaklanıldığında böyle olur ;-)

— mb897038

149

Onu seçebilir ve normal şekilde ekleyebilirsiniz:

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

— nickf
kaynak

2

siparişi nasıl kontrol edebilirim, bu bağlantının nereye yerleştirileceği

— Jitendra Vyas

7

Belgeleri okuyun: docs.jquery.com/Manipulation insertBefore , insertAfteristediğiniz şeydir.

— nickf

3

Bunu belgeye zaten koydum, ancak baş

— içeriğime eklenmiyor

Bağlantı ekliyor, ancak sayfanın görünümünde bağlantı görünmüyor Kaynak ... Bunu Firebug gibi tarayıcı geliştirme araçlarından görüntüleyebiliyorum. Bağlantıyı kaynağında da görüntüleyebilir miyim?

— Pankaj Tiwari

4

@PankajTiwari Kod, onu orijinal kaynağa (sunucu tarafından sağlanan) değil, geçerli belgeye eklediği için bunu kaynak görünümünde görmeyeceksiniz. Bu yüzden FireBug ve Chrome Dev araçları çok kullanışlıdır.

— Bernhard Hofmann

129

JavaScript:

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

DOM öğesini şu şekilde yapın:

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

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

— Joshua Woodward
kaynak

1

Komut dosyası öğeleriyle çalışır!

— Ray Foss

26

jQuery

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

JavaScript:

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

— David Hedlund
kaynak

5

appendChild için bir DOM öğesi gerekmez mi? yani. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— fredrik

2

iyi evet. ...Sorunun merkezi bir parçası olduğunu hissetmediğim için o kısmı bıraktım ve ayrıca, yazarken, kafasına koymak istediği şeyle ilgili uygulamalı bir örnek yoktu. ama evet, bir DOM öğesi olması gerekir.

— David Hedlund

10

Sen kullanabilirsiniz innerHTMLsadece concat ekstra alan dize kadar;

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

Ancak, kafaya eklediğiniz fazladan şeylerin ilk yüklemeden sonra tarayıcı tarafından tanınacağını garanti edemezsiniz ve ekstra stil sayfaları yüklenirken bir FOUC (şekillendirilmemiş içerik flaşı) almanız mümkündür.

API'ye yıllardır bakmadım, ancak document.writebu tür bir eylem için tasarlanmış olanı da kullanabilirsiniz . Ancak bu, ilk AJAX isteğiniz tamamlanana kadar sayfanın oluşturulmasını engellemenizi gerektirir.

— Jivings
kaynak

9

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

Misal:

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
kaynak

9

Geçici bir elemanını (e. G. Oluştur DIV), onun için HTML kodu atamak innerHTMLmülkiyet ve sonra onun ekleme alt düğümlerin için HEADbirer eleman tek. Örneğin, bunun gibi:

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

Tüm HEADiçeriği onun aracılığıyla yeniden yazmakla karşılaştırıldığında innerHTML, bu, HEADöğenin mevcut alt öğelerini hiçbir şekilde etkilemez.

Not komut stilleri başarıyla uygulanırken bu şekilde takılı görünüşe göre, otomatik olarak yürütülmez. Bu nedenle, çalıştırılacak komut dosyalarına ihtiyacınız varsa, JS dosyalarını Ajax kullanarak yüklemeli ve ardından içeriklerini eval().

— Marat Tanalin
kaynak

Bunu içinde böyle yapıyorum body, ama bu gerçekten head-tag'ın içinde yapılabilir mi? Ben izlenim sadece izin verilen etiketler altında base, link, meta, title, styleve script?

— mb897038

AFAICT, Ajax yanıtınızda tam olarak bu unsurlara sahipsiniz. Değil mi

— Marat Tanalin

Gerçekten, ama yine de head etiketinin içindeki bir div ile çalışmasını sağlayamıyorum. Görünüşe göre Chrome, vücuttaki div içeriğini gösterecek kadar "akıllı".

— mb897038

2

Muhtemelen cevabı dikkatlice okumadınız. ;-) DIVÖğe, HTML kodunu ayrıştırmak için geçici bir kapsayıcıdır . Sen eklemek olmamalıdır DIVkendini HEAD. Alt düğümlerini eklemelisiniz . Lütfen yanıta eklediğim örneğe bakın.

— Marat Tanalin

1

@GaetanL. " tempÖğenin içinde alt öğeler varken ." Node.firstChild () belgelerine bakın .

— Marat Tanalin

4

Javascript pure deneyin:

Kitaplık JS:

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

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

veya jQuery:

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

— KingRider
kaynak

-5

Jquery ile başka seçeneğiniz vardır:

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

her neyse çalışıyor. Diğerlerinin söylediği JavaScript seçeneği, bu da doğru.

— Dave
kaynak

2

Bu, mevcut içeriği silecek ve yeni öğeler oluşturacaktır. Bunun, dinamik olarak ayarlanmış DOM özelliklerini kaybetmek ve komut dosyalarının yeniden yürütülmesine neden olmak gibi istenmeyen yan etkileri olabilir.

— Quentin

bu nedenle, tüm DOM özelliklerini kurtarmak için $ ['head']. html () 'den önce kullanmalısınız

— Dave

1

Kullanmak tüm DOM özelliklerini .html()kurtarmaz . (Bu sorunun en yaygın örneği ve en görünür olanı, bir forma yeni alanlar eklemek için benzer kod kullanılmasıdır. Değer özelliği, bir alanın varsayılan değerini temsil eder, bu nedenle, onu almak ve sonra geri ayarlamak mevcut tüm alanları varsayılan değerlerine). html()

— Quentin

Kodumda test ettiğimden ve çalıştığından ve tüm DOM özelliklerinin çalıştığından emin olabilirim. Lütfen kendinizi test edin, IE11'de çalışıyorum

— Dave

Kaldırılabilecek şeyler de olaylardır.

— Hydroper