微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – 如何通过ajax将css注入文档?

所以我通过 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中它会导致一些问题.

解决方法

您可以使用.filter()来查找< style />而不是使用正则表达式. tag,从那里只需使用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上测试过

原文地址:https://www.jb51.cc/jquery/177176.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐