如何通過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到當前頁面：

$.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; 
    } 
});

我最初有一個樣式表，然後簡單地做了以下內容：

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" />'); 
    }

這一工程除了在IE8中引起一些問題。

來源

2011-06-29 PaulS

它看起來像你的jQuery選擇器正在尋找一個元素帶有「head」標識。你可能想用'$（「head」）。html（$（data）.find（「head」）。html（））;' –

@josh那部分工作正常。我只是更新了這個例子，所以它說#header而不是#head只是爲了表明我對head元素不感興趣。謝謝。 – PaulS

而不是使用你可以使用.filter()找到<style/>標籤，從那裏正則表達式的簡單使用document.getElementsByTagName("head")[0]要追加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

在IE8/9，鉻測試，firefox

來源

2011-06-29 16:20:11

這很好用。我想讓另一個例子也適用。將css放入自己的文檔中，然後使用鏈接標籤將其引入。但是，當我將javascript鏈接標籤附加到頭部時，IE8通過呈現注入的鏈接執行正確的操作，但它一直顯示還有一次下載。如果我點擊瀏覽器的任何地方，然後等待下載消失。它很煩人。 – PaulS

難道你不只是創建一個樣式標籤，並將其插入到DOM中，就像插入任何其他標籤一樣？

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

*沒有試過

編輯：

哦，我看到你正在試圖從一個HTML頁面中提取CSS。有沒有一種方法可以在不需要加載另一個頁面的情況下獲得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注入到文檔中？

回答

相關問題