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

body や head の代わりに script タグの後に挿入するなど、ここで明らかでないことがいくつかあります。詳しくはこちら

于 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 に答える