ajax経由で文書にCSSを挿入するには？

jqueryのajaxメソッドでデータを取得します。検索されたデータは次のようになります。ajax経由で文書にCSSを挿入するには？

<html> 
<head> 
    <style> 
    body { 
    color: red; 
    font-weight: bold; 
    } 

    #someElement { 
    color: blue; 
    padding: 1em 
    } 
    </style> 
</head> 
    <body> 
    <div id="header">Super</div> 
    <p>blah blah blah</p> 
    <div id="footer">Stuff</div> 
    </body> 
</html>

スタイルを抽出し、それをajax呼び出しを実行している現在のドキュメントに挿入するにはどうすればよいですか？私はあらゆる種類のjquery呪文を試しましたが、それは行っていません。私は今、正規表現を経由してCSSを抽出するが、現在のページにCSSを置く方法がわからないよよ：作品

if($.browser.msie) { 
     $('head').html(
      '<link rel="stylesheet" href="http://c.this/template.css" type="text/css" />'+ 
      $('head').html() 
     ); 
    } 
    else { 
     $('head').prepend('<link rel="stylesheet" href="http://c.this/template.css" type="text/css" />'); 
    }

：単純に次のことをやった

$.ajax({ 
    url: '/template.html', 
    success: function(data) { 
     $("#header").html($(data).find('#header').html()); 
     $("#footer").html($(data).find('#footer').html()); 

     var re = /<style>((?:[\n\r]|.)+)<\/style>/m; 
     var css = re.exec(data); 

     // What to do with the css?? 

     return; 
    } 
});

私は最初に、スタイルシートを持っていましたIE8以外ではいくつかの問題が発生します。

出典

2011-06-29 PaulS

jQueryセレクタが要素を探しているようです「頭」のidを持つ。 '$（" head "）で試してみてください。html（$ head）。html（））;' –

@joshその部分はうまくいきます。私はちょうど私がヘッド要素に興味がないことを示すために#headerの代わりに#headerと言うように例を更新しました。ありがとう。 – PaulS

の代わりにあなたがそこから単にIE8/9、クロームでテストHTMLStyleElement

$.ajax({ 
    type: 'POST', 
    url: "/echo/html/", 
    data: { 
     html: postHtml 
    }, 
    success: function(data) { 
     var style = $(data).filter("style").get(0); 
     document.getElementsByTagName("head")[0].appendChild(style); 
     $("#header").html($(data).filter('#header').html()); 
     $("#footer").html($(data).filter('#footer').html()); 
    } 
});

Working example on jsfiddle

を追加するdocument.getElementsByTagName("head")[0]を使用し、<style/>タグを検索し.filter()を使用することができます正規表現を使用して、firefox

出典

2011-06-29 16:20:11

それはうまく動作します。他の例もあまりにもうまくいくようにしたいと思います。その中にcssを持っていれば、リンクタグを使ってそれを持ってきます。しかし、私はjavascriptを頭にリンクタグを追加すると、IE8は注入されたリンクをレンダリングすることで正しいことを行いますが、もう1回ダウンロードがあることを示し続けます。ブラウザの任意の場所をクリックすると、ダウンロードを待っています。気に障る。 – PaulS

他のタグを挿入するのと同じ方法で、スタイルタグを作成してDOMに挿入しませんか？ああ、私はあなたがHTMLページからCSSを抽出しようとしている参照

：

$('<style type="text/css"></style>') 
    .appendTo("head") 
    .html("your css text here");

*この

EDITを試していません。別のページを読み込まなくてもちょうどCSSを得る方法はありますか？

出典

2011-06-29 15:16:32

はい。しかし、私は@ T9bに言及したように、私はjavascriptが私にそれをしたいと思います。出来ますか？ – PaulS

'insertAfter'は上の例では本当に' appendTo'でなければなりません。 – SammyK

第三者のページを解析しようとしていますか？

ではなく、の場合は、あなたのajaxを呼び出すページとは独立してCSSを読み込んでみてください。それから、ページ上のすべてのエレメンツに利用できます。新しいものは、ajaxによって提供されます。

他のサイトページを解析する場合は、プロキシサービスを開発する必要があります。

出典

2011-06-29 15:20:07 T9b

ajaxのフェッチとは独立してcssをロードする必要があるかもしれません。それは私がそれを行うためにjavascriptを得ることができない場合、実際に私のバックアップ計画です。 – PaulS

ajax経由で文書にCSSを挿入するには？

答えて

関連する問題