如何在沒有jQuery的情況下將直接標記附加到HEAD？

我有一個包含樣式表的HTML（通過Rails資產管道創建）的字符串，我需要將它附加到頭部，並在所有主流瀏覽器中加載樣式表。字符串看起來像這樣：如何在沒有jQuery的情況下將直接標記附加到HEAD？

<link href="https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="https://www.v.me/assets/widgets-d4c93376a05ffe6d726371b89bc58731.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="https://www.v.me/assets/flowplayer-minimalist-3254ab41f4865c79282728f0012bb98d.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="https://www.v.me/assets/main-12765c4980ba6d109852c52830b34586.css" media="screen" rel="stylesheet" type="text/css" />

我需要這樣做，而不使用jQuery。這可能嗎？我希望我有一個數組中的URL，但我不知道。作爲最後的手段，我可以考慮使用正則表達式來解析URL，但我想避免這種情況。

來源

2013-09-27 Chad Johnson

jQuery是隻是一個基於JavaScript中的框架層。在jQuery中你可以做的任何事情，你可以在JavaScript中做，儘管有點麻煩。 – Axel

的確如此。我應該以不同的方式表達這個問題的部分。 Yay提供週五結束的問題。 –

function addLink(linkURL,rel,type,media){ 
    var link = document.createElement('link'); 
    link.href = linkURL; 
    link.rel = rel? rel: 'stylesheet'; 
    link.media = media ? media: 'screen'; 
    link.type = type ? type: 'text/css'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(link, s) 
} 

addLink('https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css')

有幾件事情在這裏可能不明顯，比如插入腳本標籤而不是body或head之後。請參閱here瞭解更多信息

來源

2013-09-27 22:35:12 Sriharsha

這是IMO最好的方法，但它需要添加諸如'rel'，'type'和'media'等'link'的其他參數才能成爲完整的解決方案:) –

@CollinGrady修改代碼以接受rel/type/media有合適的默認值。 – Sriharsha

該解決方案需要了解URL，但提問者明確表示*我可以考慮使用正則表達式來解析URL，但我想避免這種*。 – Oriol

var pHead = document.getElementsByTagName('head')[0]; 
pHead.innerHTML = pHead.innerHTML + assetsString;

來源

2013-09-27 22:35:19

你可以試試這個：

document.head.innerHTML += 
    '<link href="https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css" media="screen" rel="stylesheet" type="text/css" />' 
    +'<link href="https://www.v.me/assets/widgets-d4c93376a05ffe6d726371b89bc58731.css" media="screen" rel="stylesheet" type="text/css" />' 
    +'<link href="https://www.v.me/assets/flowplayer-minimalist-3254ab41f4865c79282728f0012bb98d.css" media="screen" rel="stylesheet" type="text/css" />' 
    +'<link href="https://www.v.me/assets/main-12765c4980ba6d109852c52830b34586.css" media="screen" rel="stylesheet" type="text/css" />' 
;

對於舊的瀏覽器，第一次使用

if(!document.head) document.head = document.getElementsByTagName('head')[0];

編輯：@Sriharsha警告說，代碼上面可以再次下載所有的資源。這不會發生在Firefox 27，但是如果你想避免這種肯定的，你可以使用：

var tmpHead = document.implementation.createHTMLDocument().head; 
tmpHead.innerHTML = myString; 
for (var i=0, tmpLink; tmpLink = tmpHead.childNodes[i]; ++i) { 
    document.head.appendChild(tmpLink.cloneNode(false)); 
}

注意document.implementation.createHTMLDocument僅適用於新的瀏覽器。

來源

2013-09-27 22:35:53 Oriol

這是一個粗略的方法，如果您設置了這樣的innerHTML，它將再次下載所有資源（樣式/腳本..），即使它已經可用。 – Sriharsha

@Sriharsha這在FF27上不會發生。無論如何，我已經用一個可以避免這個問題的替代代碼更新了我的答案。 – Oriol

如果CSSTags是一個包含所有鏈接代碼的HTML字符串，那麼你可以使用：

document.getElementsByTagName('head')[0].innerHTML += CSSTags;

來源

2013-09-27 22:36:58 BYossarian

如何在沒有jQuery的情況下將直接標記附加到HEAD？

回答

相關問題