Bagaimana cara menambahkan sesuatu di <head> melalui jquery / javascript?

102

Saya bekerja dengan CMS, yang mencegah pengeditan sumber HTML untuk <head>elemen.

Misalnya saya ingin menambahkan yang berikut di atas <title>tag:

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

javascript jquery css xhtml Jitendra Vyas
sumber

8

Ini tidak masuk akal ... Kepala diuraikan sebelum eksekusi javascript. Menambahkan meta stuf ke kepala melalui javascript tidak akan memberikan efek yang diinginkan.

Andre Haverdings

1

@Mickel - ya. jawaban dari semua pertanyaan membantu saya

Jitendra Vyas

2

Meskipun tidak terkait dengan pertanyaan CMS, masuk akal untuk menambahkan tag meta dalam keadaan tertentu. Ada berbagai addons browser dan suntikan javascript yang menggunakan data yang ada di tag meta untuk mengumpulkan informasi. OpenGraph Facebook adalah salah satu contohnya. Memasukkan tag meta ke head diperlukan saat Anda tidak memiliki akses langsung ke HTML asal, baik karena kesalahan CMS atau karena Anda sendiri membuat addon / injeksi javascript.

conceptDawg

Perhatikan bahwa mungkin saja menambahkan <meta>tag secara dinamis tidak akan berpengaruh, tergantung pada apa itu dan browser apa yang terlibat.

Pointy

Poin bagus, itulah yang terjadi ketika seseorang terlalu fokus pada masalah ;-)

mb897038

149

Anda dapat memilihnya dan menambahkannya seperti biasa:

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

nickf
sumber

2

bagaimana saya bisa mengontrol ketertiban, di mana tautan ini akan ditempatkan

Jitendra Vyas

7

Baca dokumentasi: docs.jquery.com/Manipulation insertBefore , insertAfteradalah yang Anda inginkan.

nickf

3

Saya telah memasukkan ini ke dalam dokumen. Sudah, tetapi tidak ada di isi kepala saya

serpent403

Itu menambahkan tautan, tetapi tautan tidak muncul di tampilan halaman Sumber ... Saya dapat melihatnya dari alat pengembangan browser seperti Firebug. Bisakah saya juga melihat link di view source?

Pankaj Tiwari

4

@PankajTiwari Anda tidak akan melihatnya dalam tampilan sumber karena kode menambahkannya ke dokumen saat ini, bukan sumber asli (yang disediakan oleh server). Itulah mengapa alat FireBug dan Chrome Dev sangat berguna.

Bernhard Hofmann

129

JavaScript:

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

Jadikan elemen DOM seperti ini:

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

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

Joshua Woodward
sumber

1

Bekerja dengan elemen skrip!

Ray Foss

26

jQuery

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

JavaScript:

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

David Hedlund
sumber

5

tidak appendChild membutuhkan elemen DOM? yaitu. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

fredrik

2

Baiklah. saya hanya meninggalkan bagian itu ...karena saya tidak merasa itu adalah bagian utama dari pertanyaan, dan juga, pada saat penulisan, tidak ada contoh langsung tentang apa yang ingin dia masukkan. tapi ya, itu harus berupa elemen DOM.

David Hedlund

10

Anda dapat menggunakan innerHTMLuntuk hanya menggabungkan string bidang ekstra;

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

Namun, Anda tidak dapat menjamin bahwa hal-hal ekstra yang Anda tambahkan ke head akan dikenali oleh browser setelah pemuatan pertama, dan mungkin Anda akan mendapatkan FOUC (flash konten tanpa gaya) saat lembar gaya tambahan dimuat.

Saya belum melihat API selama bertahun-tahun, tetapi Anda juga dapat menggunakan document.write, yang dirancang untuk tindakan semacam ini. Namun, ini akan mengharuskan Anda untuk memblokir halaman dari rendering sampai permintaan AJAX awal Anda selesai.

Jivings
sumber

9

Di browser terbaru (IE9 +) Anda juga dapat menggunakan document.head :

Contoh:

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
sumber

9

Buat elemen sementara (mis. DIV), Tetapkan kode HTML Anda ke innerHTMLpropertinya, lalu tambahkan node turunannya ke HEADelemen satu per satu. Misalnya seperti ini:

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

Dibandingkan dengan menulis ulang seluruh HEADkonten melalui its innerHTML, ini tidak akan mempengaruhi elemen turunan yang ada dari HEADelemen tersebut dengan cara apa pun.

Perhatikan bahwa skrip yang dimasukkan dengan cara ini tampaknya tidak dijalankan secara otomatis, sementara gaya berhasil diterapkan. Jadi jika Anda membutuhkan skrip untuk dieksekusi, Anda harus memuat file JS menggunakan Ajax dan kemudian mengeksekusi kontennya menggunakan eval().

Marat Tanalin
sumber

Begitulah cara saya melakukannya di body, tetapi bisakah itu benar-benar dilakukan di dalam head-tag? Aku berada di bawah kesan bahwa tag hanya diperbolehkan mana base, link, meta, title, styledan script?

mb897038

AFAICT, Anda memiliki elemen tersebut persis di respons Ajax Anda. Bukan?

Marat Tanalin

Memang, tapi saya masih tidak bisa membuatnya berfungsi dengan div di dalam tag kepala. Sepertinya Chrome cukup "pintar" untuk menampilkan konten div di badannya.

mb897038

2

Anda mungkin belum membaca jawabannya dengan cermat. ;-) DIVElemen ini hanyalah wadah sementara untuk tujuan parsing kode HTML . Anda tidak boleh memasukkan DIVdirinya sendiri ke file HEAD. Anda harus memasukkan node anaknya . Silakan lihat contoh yang telah saya tambahkan ke jawabannya.

Marat Tanalin

1

@Bayu_joo “Meskipun ada elemen anak di dalam tempelemen tersebut.” Lihat dokumen Node.firstChild () .

Marat Tanalin

4

Coba javascript murni:

Perpustakaan JS:

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

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

atau jQuery:

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

KingRider
sumber

-5

Dengan jquery Anda memiliki opsi lain:

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

bagaimanapun itu berhasil. Opsi JavaScript yang lain berkata, itu juga benar.

Dave
sumber

2

Itu akan menghapus konten yang ada dan menghasilkan elemen baru. Ini dapat memiliki efek samping yang tidak diinginkan seperti kehilangan properti DOM yang disetel secara dinamis dan menyebabkan skrip dijalankan ulang.

Quentin

untuk alasan ini Anda harus menggunakan sebelum $ ('head'). html () untuk memulihkan semua properti DOM

Dave

1

Menggunakan .html()tidak akan memulihkan semua properti DOM. (Contoh paling umum dari masalah ini, dan yang paling terlihat, adalah saat menggunakan kode serupa untuk menambahkan bidang baru ke formulir. Atribut nilai mewakili nilai default bidang, jadi mendapatkan html()dan kemudian menyetelnya kembali akan menyetel ulang semua yang ada ke nilai defaultnya).

Quentin

Saya yakin Anda dapat mengujinya dalam kode saya dan berhasil dan semua properti DOM Bekerja. Silakan, uji diri Anda sendiri, saya sedang bekerja IE11

Dave

Hal-hal yang mungkin dihapus adalah acara juga.

Hydroper

Bagaimana cara menambahkan sesuatu di <head> melalui jquery / javascript?

Jawaban: