document.head, document.body để đính kèm kịch bản

Tôi đã thường được sử dụng, và nhìn thấy lần đề nghị, cấu trúc dom truy cập như thế này để thêm nội dung vào các trang web động:document.head, document.body để đính kèm kịch bản

loader = document.createElement('script'); 
loader.src = "myurl.js"; 
document.getElementsByTagName('head')[0].appendChild(loader);

Bây giờ, một cách tình cờ, tôi thấy rằng làm việc này trong Google chrome:

document.head.appendChild(loader);

Một cuộc điều tra nhỏ hơn, và tôi thấy rằng làm việc này, rõ ràng là qua trình duyệt:

document.body.appendChild(loader);

Vì vậy, câu hỏi chính của tôi là: có bất kỳ lý do nào tại sao tôi không nên đính kèm các yếu tố vào BODY như thế này?

Ngoài ra, bạn có nghĩ rằng document.head sẽ được hỗ trợ rộng rãi hơn không?

Nguồn

2011-09-26 graphicdivine

Kiểm tra phân tích sâu này do Stoyan Stefanov thực hiện: [Trường hợp vô lý khi thêm phần tử tập lệnh] (http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/) – CMS

Tôi không thể thấy bất kỳ lý do nào trong việc thực tế cho dù bạn chèn các phần tử <script> vào các yếu tố <head> hoặc <body>. Về lý thuyết, tôi cho rằng DOM có thời gian chạy khá giống với DOM tĩnh.

Đối với document.head, nó là một phần của HTML5 và dường như đã được triển khai trong các bản dựng mới nhất của tất cả các trình duyệt chính (xem http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-head).

Nguồn

2011-09-26 16:12:24

Điều gì về việc thêm biểu định kiểu làm plugin mà bạn muốn mọi người có thể ghi đè lên một số kiểu từ CSS của chúng được định vị trong đầu, mà không phải thêm '! Important' vào mọi thứ – Richard

document.body là một phần của đặc tả DOM, tôi không thấy bất kỳ điểm nào tại sao không sử dụng nó. Nhưng hãy lưu ý điều này:

Trong tài liệu có nội dung, trả về phần tử và trong tài liệu khung, điều này trả về phần tử ngoài cùng.

(từ https://developer.mozilla.org/en/DOM/document.body)

document.head ~~hiện đang không được định nghĩa trong bất kỳ đặc điểm kỹ thuật DOM~~ (dường như tôi đã sai về điều đó, thấy Daniel câu trả lời), vì vậy bạn thường nên tránh sử dụng nó.

Nguồn

2011-09-26 16:09:14 Niko

Các câu trả lời được đưa ra cho đến nay tập trung hai khía cạnh khác nhau và cả hai đều rất hữu ích.

Nếu tính di động là yêu cầu đối với bạn, trong các tài liệu không thuộc quyền sở hữu của bạn, nơi bạn không thể kiểm soát sự kết hợp DOM, có thể hữu ích để kiểm tra sự tồn tại của phần tử bạn phải chắp thêm tập lệnh; Bằng cách này, nó sẽ hoạt động cả khi phần HEAD chưa được tạo ra một cách rõ ràng:

var script = document.createElement('script'); 
var parent = document.getElementsByTagName('head').item(0) || document.documentElement; 
parent.appendChild(script);

Nguồn

2013-04-13 18:41:57

Xem my answer về một câu hỏi tương tự để so sánh kỹ lưỡng hơn các tùy chọn. (ví dụ: section/script.appendChild vs. section/script.insertBefore)

Nguồn

2013-06-03 14:17:07 drzaus

Tôi đã thử triển khai mã này và gặp phải một chút rắc rối, vì vậy tôi muốn chia sẻ kinh nghiệm của mình.

Đầu tiên tôi đã cố gắng này:

<script> 
loader = document.createElement('script'); 
loader.src = "script.js"; 
document.getElementsByTagName('head')[0].appendChild(loader); 
</script>

Và trong kịch bản.js file Tôi đã có mã như sau:

// This javascript tries to include a special css doc in the html header if windowsize is smaller than my normal conditions. 
winWidth = document.etElementById() ? document.body.clientWidth : window.innerWidth; 
if(winWidth <= 1280) { document.write('<link rel="stylesheet" type="text/css" href="style/screen_less_1280x.css">'); }

Vấn đề là, khi tôi làm tất cả điều này, mã sẽ không hoạt động. Trong khi nó đã công việc khi tôi thay thế các bộ nạp kịch bản với đơn giản này:

<script src="script.js"></script>

đó làm việc cho tôi, vì vậy vấn đề giải quyết cho bây giờ, nhưng tôi muốn hiểu sự khác biệt giữa hai cách tiếp cận. Tại sao một người làm việc chứ không phải người kia?

Hơn thế nữa là trong script.js Tôi cũng có mã như:

function OpenVideo(VideoSrcURL) { 
window.location.href="#OpenModal"; 
document.getElementsByTagName('video')[0].src=VideoSrcURL; 
document.getElementsByTagName('video')[0].play();}

Và mã mà không làm việc tốt bất kể là cách tôi tìm nguồn kịch bản trong tập tin html của tôi.

Vì vậy, tập lệnh thay đổi kích thước cửa sổ của tôi không hoạt động nhưng nội dung video thì có. Vì vậy, tôi tự hỏi nếu sự khác biệt trong hành vi đã làm với "tài liệu" đối tượng ...? Có thể "tài liệu" đang tham chiếu tệp script.js thay vì tệp html.

Tôi không biết. Tôi nên chia sẻ vấn đề này trong trường hợp nó áp dụng cho bất kỳ ai khác.

Chúc mừng.

Nguồn

2013-06-30 03:56:28

Tôi biết điều này thực sự muộn, nhưng bạn thực sự gần gũi. el = document.createElement ('script'); el.src = 'script.js'; var parent = document.getElementsByTagName ('head'). Item (0) || document.documentElement; parent.appendChild (el); – Sparatan117

document.head, document.body để đính kèm kịch bản

Trả lời

Các vấn đề liên quan