Làm cách nào để thêm bất kỳ thứ gì vào <head> thông qua jquery / javascript?

102

Tôi đang làm việc với CMS, CMS ngăn việc chỉnh sửa nguồn HTML cho <head>phần tử.

Ví dụ: tôi muốn thêm phần sau vào phía trên <title>thẻ:

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

— Jitendra Vyas
nguồn

8

Điều này không có nghĩa là ... Phần đầu được phân tích cú pháp trước khi thực thi javascript. Thêm meta stuf vào đầu thông qua javascript sẽ không có hiệu quả mong muốn.

— Andre Haverdings 14/12/09

1

@Mickel - vâng. câu trả lời của tất cả các câu hỏi giúp tôi

— Jitendra Vyas

2

Mặc dù không liên quan đến câu hỏi CMS, nhưng bạn có thể thêm thẻ meta trong một số trường hợp nhất định. Có nhiều phần bổ trợ trình duyệt khác nhau và phần chèn javascript sử dụng dữ liệu có trong thẻ meta để thu thập thông tin. OpenGraph của Facebook là một ví dụ. Việc chèn thẻ meta vào phần đầu là cần thiết khi bạn không có quyền truy cập trực tiếp vào HTML gốc, cho dù do lỗi của CMS hay do bạn đang tự viết addon / injection javascript.

— conceptDawg

Lưu ý rằng có thể việc thêm <meta>thẻ động sẽ không có tác dụng, tùy thuộc vào chúng là gì và trình duyệt nào có liên quan.

— Pointy

Tốt, đó là những gì sẽ xảy ra khi một người tập trung quá nhiều vào vấn đề ;-)

— mb897038

149

Bạn có thể chọn nó và thêm vào nó như bình thường:

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

— nickf
nguồn

2

làm thế nào tôi có thể kiểm soát trật tự, nơi liên kết này sẽ được đặt

— Jitendra Vyas

7

Đọc tài liệu: docs.jquery.com/Manipulation insertBefore , insertAfterlà những gì bạn muốn.

— nickf 14/12/09

3

Tôi đã đặt điều này trong document.ready, nhưng nó không gắn liền với các nội dung đầu của tôi

— serpent403

Nó đang thêm liên kết, nhưng liên kết không hiển thị trong chế độ xem của trang Nguồn ... Tôi có thể xem nó từ các công cụ phát triển trình duyệt như Firebug. Tôi có thể xem liên kết trong nguồn xem không?

— Pankaj Tiwari

4

@PankajTiwari Bạn sẽ không thấy nó trong chế độ xem nguồn vì mã gắn nó vào tài liệu hiện tại, không phải nguồn gốc (được cung cấp bởi máy chủ). Đó là lý do tại sao các công cụ FireBug và Chrome Dev rất hữu ích.

— Bernhard Hofmann

129

JavaScript:

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

Tạo phần tử DOM như vậy:

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

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

— Joshua Woodward
nguồn

1

Hoạt động với các yếu tố kịch bản!

— Ray Foss

26

jQuery

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

JavaScript:

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

— David Hedlund
nguồn

5

dosen appendChild có yêu cầu phần tử DOM không? I E. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— fredrik

2

vâng vâng. Tôi chỉ bỏ phần đó ...vì tôi không cảm thấy đó là phần trọng tâm của câu hỏi, và tại thời điểm viết, không có ví dụ thực tế nào về những gì anh ấy muốn đưa vào đầu. nhưng có, nó cần phải là một phần tử DOM.

— David Hedlund

10

Bạn có thể sử dụng innerHTMLđể nối chuỗi trường bổ sung;

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

Tuy nhiên, bạn không thể đảm bảo rằng những thứ bổ sung mà bạn thêm vào phần đầu sẽ được trình duyệt nhận ra sau lần tải đầu tiên và có thể bạn sẽ nhận được FOUC (flash nội dung chưa được định kiểu) khi các bảng định kiểu bổ sung được tải.

Tôi đã không xem API trong nhiều năm, nhưng bạn cũng có thể sử dụng document.write, đó là thứ được thiết kế cho loại hành động này. Tuy nhiên, điều này sẽ yêu cầu bạn chặn trang hiển thị cho đến khi yêu cầu AJAX ban đầu của bạn hoàn tất.

— Jivings
nguồn

9

Trong các trình duyệt mới nhất (IE9 +), bạn cũng có thể sử dụng document.head :

Thí dụ:

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
nguồn

9

Tạo một phần tử tạm thời (e. G. DIV), Gán mã HTML của bạn cho thuộc tính của nó innerHTML, rồi nối các nút con của nó vào HEADphần tử một. Ví dụ, như thế này:

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

So với việc viết lại toàn bộ HEADnội dung thông qua nó innerHTML, điều này sẽ không ảnh hưởng đến các phần tử con hiện có của HEADphần tử theo bất kỳ cách nào.

Lưu ý rằng các tập lệnh được chèn theo cách này dường như không được thực thi tự động, trong khi các kiểu được áp dụng thành công. Vì vậy, nếu bạn cần các tập lệnh được thực thi, bạn nên tải các tệp JS bằng Ajax và sau đó thực thi nội dung của chúng bằng cách sử dụng eval().

— Marat Tanalin
nguồn

Đó là cách tôi thực hiện trong body, nhưng điều đó thực sự có thể được thực hiện bên trong head-tag không? Tôi đã theo ấn tượng rằng các thẻ chỉ được phép ở đâu base, link, meta, title, stylevà script?

— mb897038

AFAICT, bạn có chính xác những yếu tố đó trong phản hồi Ajax của mình. Không bạn?

— Marat Tanalin

Thật vậy, nhưng tôi vẫn không thể làm cho nó hoạt động với một div bên trong thẻ head. Có vẻ như Chrome đủ "thông minh" để hiển thị nội dung của div trong phần thân.

— mb897038

2

Có thể bạn đã không đọc kỹ câu trả lời. ;-) Phần DIVtử chỉ là một vùng chứa tạm thời cho mục đích phân tích cú pháp mã HTML . Bạn không nên chèn DIVchính nó vào HEAD. Bạn nên chèn các nút con của nó . Vui lòng xem ví dụ tôi đã thêm vào câu trả lời.

— Marat Tanalin

1

@GaetanL. "Trong khi có các phần tử con bên trong tempphần tử." Xem tài liệu Node.firstChild () .

— Marat Tanalin

4

Hãy thử một javascript thuần túy:

Thư viện JS:

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

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

hoặc jQuery:

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

— KingRider
nguồn

-5

Với jquery, bạn có tùy chọn khác:

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

dù sao thì nó cũng đang hoạt động. Những người khác đã nói tùy chọn JavaScript, điều đó cũng đúng.

— Dave
nguồn

2

Điều đó sẽ xóa nội dung hiện có và tạo ra các phần tử mới. Điều này có thể gây ra các tác dụng phụ không mong muốn như làm mất các thuộc tính DOM được thiết lập động và khiến các tập lệnh được thực thi lại.

— Quentin

vì lý do này, bạn nên sử dụng trước $ ('head'). html () để khôi phục tất cả các thuộc tính DOM

— Dave

1

Việc sử dụng .html()sẽ không khôi phục tất cả các thuộc tính DOM. (Trường hợp phổ biến nhất của vấn đề này và dễ thấy nhất là khi sử dụng mã tương tự để thêm các trường mới vào biểu mẫu. Thuộc tính value đại diện cho giá trị mặc định của một trường, vì vậy việc lấy html()và sau đó đặt lại nó sẽ đặt lại tất cả trường thành giá trị mặc định của chúng).

— Quentin

Tôi có thể chắc chắn với bạn rằng tôi đã thử nghiệm nó trong mã của mình và nó đang hoạt động và tất cả các thuộc tính DOM đều Hoạt động. Làm ơn, hãy tự kiểm tra, tôi đang làm việc với IE11

— Dave

Những thứ có thể bị loại bỏ cũng là sự kiện.

— Hydroper