2010-08-29 9 views
13

Mọi trình duyệt tôi đã quan sát đều tạo thành phần tử <head> có thể truy cập được trong DOM ngay cả khi không có các thẻ <head></head> rõ ràng trong đánh dấu tài liệu.Phần tử <head> luôn có sẵn trong DOM, ngay cả khi không có trong đánh dấu HTML?

Tuy nhiên, Google Analytics sử dụng đoạn mã sau cho động chèn script:

(function() { 
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); 
})(); 

Các dòng sau:

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

dường như để tạo ra một nhượng bộ đặc biệt đối với trường hợp một yếu tố <head> là không có mặt .

Đây chỉ là trường hợp tương thích ngược (ví dụ, đối với Netscape 4 hoặc tương tự), hoặc có trường hợp không được giả định rằng các trình duyệt hiện đại (tức là Internet Explorer 6 và mới hơn) sẽ luôn có quyền truy cập vào phần tử <head> trong DOM?

+2

IE6 và thậm chí IE5.5 thêm phần tử 'HEAD' nếu không có, các trình duyệt khác như Safari <= 4 không, cũng có thể là một số phiên bản Opera cũ IIRC. – CMS

+0

Cảm ơn, CMS! IE 6 là về như xa như tôi đã hỗ trợ trong một thời gian dài, do đó, nó làm cho cảm giác rằng tôi đã chỉ trở thành sử dụng để trình duyệt thêm một '' automagically. – Bungle

Trả lời

13

Trình duyệt hiện đại đang tạo yếu tố đầu cho bạn khi cần.

Nhưng giả định rằng khách hàng sẽ làm như vậy không thông minh nếu bạn muốn mã của mình được chống đạn. Vì vậy, nhân viên Google đang bảo thủ và an toàn.

Điều khoản bổ sung trong tuyên bố của họ là de minimus, nhưng thêm độ tin cậy bổ sung. Vì vậy, đó là một điều tốt.

ps Giải quyết tốt câu hỏi và rút ra mã có liên quan.

Added:

Các HTML spec nói rằng thẻ đầu là không bắt buộc. Tôi không nghĩ rằng yếu tố tạo ra phần đầu "của đàn ông" trong dom được yêu cầu bởi spec. Google không muốn (và không nên) dựa vào nó ở đó.

+2

Thông số HTML 4.01 nói rằng phần tử * đầu * là bắt buộc. Chỉ các thẻ * * là tùy chọn. Xem http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-HTML. Trình duyệt, tất nhiên, thường xuyên không theo các thông số kỹ thuật và nếu chúng liên tục tự động tạo phần tử đầu, nó sẽ là do số lượng đáng kể các trang web trong thế giới thực bị phá vỡ trong các trình duyệt không làm như vậy. – Alohci

+0

@Alochi - cảm ơn bạn đã ref. Tôi đã cập nhật câu trả lời. –

+0

Câu trả lời hay! cảm ơn rất nhiều về sự giúp đỡ của bạn. @Alohci: Cảm ơn bạn đã nhập thêm - điều đó có ý nghĩa. – Bungle

2

Thực tế, không phải tất cả trình duyệt đều tự động tạo <head></head> khi tài liệu được tải. Tôi có nghĩa là ngay cả trên trình duyệt hiện đại như Chrome (Phiên bản: 9.0.597.102).

Khi bạn tải một hình ảnh trực tiếp vào trình duyệt, ví dụ như:
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg,
trình duyệt sẽ chỉ tạo ra thẻ <body> để chứa các hình ảnh và <head> thẻ không thể được tìm thấy trên các mã nguồn.

Google sử dụng mã này:

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

Chúng ta không thể tạo <head> sử dụng document.createElement('head'): sử dụng sẽ nhận được một lỗi: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3".
Vì vậy, khi không có thẻ đầu, bạn không thể nối thêm bất kỳ thứ gì vào thẻ đó. Đó là lý do tại sao google đặt phần tử vào số <body> thay thế.

+0

+1 Bạn có thể thêm tham chiếu vào câu lệnh không thể tạo thẻ 'head' động không? – GitaarLAB

+0

@GitaarLAB: Lỗi ": HIERARCHY_REQUEST_ERR: Ngoại lệ DOM 3" là tham chiếu giả sử nó được sao chép từ bảng điều khiển trình duyệt. Nó sẽ được tốt đẹp để chỉ ra * mà * trình duyệt tạo ra rằng mặc dù. – slebetman

+0

@ slebetman: quả thật vậy, ý tôi là: trình duyệt nào ném cái này và một số nguồn trực tuyến (có thẩm quyền) 'tài liệu' này. – GitaarLAB

1

Phần tử "đầu" sẽ không có mặt, nó thường phụ thuộc vào trình duyệt và tài liệu DOCTYPE.Đối với một cuộc thảo luận và một số thử nghiệm trên thấy điều này:

http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/

Sau đây sẽ chăm sóc của nhiều quirks và nó là mã tái sử dụng ngắn nhất để tải các kịch bản chung (bao gồm GA và thích):

function require(src) { 
    var s, d = document, r = d.documentElement; 
    (s = d.createElement('script')).src = src; 
    r.removeChild(r.insertBefore(s, r.firstChild)); 
} 

require(('https:' == document.location.protocol ? 
    'https://ssl' : 'http://www') + 
    '.google-analytics.com/ga.js'); 

ở đây tập lệnh cũng bị xóa khỏi tài liệu (sau khi được tải/thực thi) nhưng đó chỉ là sở thích cá nhân, người ta có thể bỏ qua "removeChild" nếu cần. Không có sự khác biệt trong hành vi bằng cách loại bỏ nó hoặc để nó ở đúng vị trí.