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

How to append straight markup to HEAD without jQuery?

本文关键字：HEAD jQuery 情况下      更新时间：2023-09-26

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

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

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

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

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

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

你可以试试这个：

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

相关文章：