document.head，document.body的附加腳本

我經常使用的，見過推薦，DOM訪問結構，這樣的動態將內容添加到頁面：現在document.head，document.body的附加腳本

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

，一個偶然的機會，我發現，這部作品在谷歌chrome：

document.head.appendChild(loader);

多一點調查，我發現這個工程，顯然是跨瀏覽器：

document.body.appendChild(loader);

所以我的主要問題是：有沒有什麼原因讓我不應該像這樣將元素添加到BODY中？

另外，您認爲document.head將會得到更廣泛的支持嗎？

來源

2011-09-26 graphicdivine

查看Stoyan Stefanov所做的深入分析：[添加腳本元素的荒謬案例]（http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/） – CMS

我不明白爲什麼在您的實踐中將<script>元素插入<head>元素或<body>元素會有什麼重要。理論上，我認爲運行時DOM類似於靜態DOM是很好的。

至於document.head，它是HTML5的一部分，顯然已在所有主流瀏覽器的最新版本中實現（請參閱http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-head）。

來源

2011-09-26 16:12:24

把樣式表作爲插件添加到你希望人們能夠覆蓋頭部定位的CSS的特定樣式，而不必爲所有內容添加'！important' – Richard

document.body是DOM規範的一部分，我沒有看到任何一點爲什麼不使用它。但請注意：

在帶有內容的文檔中，返回元素，並在frameset文檔中返回最外層的元素。

（從https://developer.mozilla.org/en/DOM/document.body）

document.head~~目前沒有任何DOM規範~~定義（顯然我錯了對，看到丹尼爾的回答），所以你應儘量避免使用它。

來源

2011-09-26 16:09:14 Niko

至今給出的答案集中了兩個不同的方面，都非常有用。

如果可移植性是您的需求，那麼在您不能控制DOM一致性的所有權文檔中，檢查是否存在您必須附加腳本的元素可能會很有用;這樣一來，它會工作也尚未明確創建的HEAD部分時：

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

來源

2013-04-13 18:41:57

見my answer上類似的問題的選項更全面的比較。（即section/script.appendChild與section/script.insertBefore）

來源

2013-06-03 14:17:07 drzaus

我試着實現這段代碼，遇到了一些麻煩，所以想分享我的經驗。

首先我嘗試這樣做：

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

而且腳本。js文件我有代碼如下：

// 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">'); }

問題是，當我做了所有這些，代碼將無法正常工作。鑑於，做一次工作，我更換了腳本裝載機簡單：

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

這對我的作品，所以解決目前的問題，但我想了解這兩種方法之間的差異。爲什麼一個人工作，而不是另一個？

更重要的是，在我的script.js也有代碼，如：

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

而且這些代碼確實做工精細，無論哪種方式我在HTML源文件的腳本。

所以我的窗口調整腳本不起作用，但視頻的東西呢。因此，我想知道行爲上的差異是否與「文檔」對象有關...？也許「文檔」引用script.js文件而不是html文件。

我不知道。以爲我應該分享這個問題，以防其他人適用。

乾杯。

來源

2013-06-30 03:56:28

我知道這真的很晚，但你是真的很接近。 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的附加腳本

回答

相關問題