Question

我有一个包含样式表HTML的字符串（通过Rails资产管道创建），我需要将其附加到头部，并在所有主流浏览器中实际加载样式表。字符串如下所示：

<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，但我想避免这种情况。

Answer 1

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')

这里有一些可能不明显的事情，比如插入脚本标签而不是身体或头部。有关详细信息，请参阅here

Answer 2

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

Answer 3

你可以试试这个：

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仅适用于新浏览器。

Answer 4

如果CSSTags是包含所有链接标记的HTML的字符串，则可以使用：

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

如何在没有jQuery的情况下将直接标记附加到HEAD？

4 个答案: