Question

所以我通过jquery的ajax方法获取数据。检索到的数据如下所示：

<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之外，它会产生一些问题。

Answer 1

您是否只是创建一个样式标记并将其插入到DOM中，就像插入任何其他标记一样？

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

*没试过这个

修改

哦，我发现你正试图从HTML页面中提取css。有没有办法可以在不加载其他页面的情况下获得CSS？

Answer 2

您是否试图解析第三方的网页？

如果不，那么为什么不加载CSS独立于调用ajax的页面。然后它可供页面上的所有元素使用 - 甚至是由ajax提供的新元素。

如果您要解析其他网站页面，则需要开发代理服务。

Answer 3

您可以使用.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，chrome，firefox上进行了测试

如何通过ajax将css注入文档？

3 个答案: