1

我有一个包含样式表 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，但我想避免这种情况。

4

4 回答 4

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

这里有几件事可能不明显，比如在脚本标签之后插入而不是正文或头部。请参阅此处了解更多信息

于 2013-09-27T22:35:12.327 回答
2 
var pHead = document.getElementsByTagName('head')[0];
pHead.innerHTML = pHead.innerHTML + assetsString;
于 2013-09-27T22:35:19.027 回答
2

你可以试试这个：

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-27T22:35:53.550 回答
2

如果CSSTags是一个包含所有链接标签的 HTML 的字符串，那么您可以使用：

document.getElementsByTagName('head')[0].innerHTML += CSSTags;
于 2013-09-27T22:36:58.477 回答