Question

我有一个网页需要每15分钟重新加载一次，但在连接断开时不会失败。所以我有一个jquery函数，它每隔15分钟替换一次。

<script type="text/javascript">
    function update_site() {
    $.ajax({
        url: "{{ settings['url'] }}",
        dataType: "html",
        cache: false,
        success: function(data) {
            // Replace body with loaded site. You can do more checks here to check
            // if the fetched content is all there.
            var body_html = data.replace(/^[\S\s]*<body[^>]*?>/i, "")
                    .replace(/<\/body[\S\s]*$/i, "");
            $('body').html(body_html);
            $('div.last_connect').css({"background-color": "green"});
        }, 
        error: function(data) {
            $('div.last_connect').css({"background-color": "red"});
        }
    });
}
</script>

这有效，但我的CSS也可以完全改变。有没有办法完全取代嵌入式样式表以类似于身体的方式取代？

我可以将样式表放在正文中，但这会违反标准。

Answer 1

您可以使用Javascript直接将样式注入头部。

function injectStyles(rule) {
  var div = $("<div />", {
    html: '&shy;<style>' + rule + '</style>'
  }).appendTo("body");    
}

injectStyles('a:hover { color: red; }');

http://css-tricks.com/snippets/javascript/inject-new-css-rules/

您还可以在注入之前删除之前的样式标记。如果我记得，在旧版本的Internet Explorer（少于9个）中注入CSS可能会很敏感，所以一定要在那里进行测试。虽然这应该有用，但您可能需要重新考虑您的方法;我认为使用样式表可能有更好的方法。

jquery，重新加载整个嵌入式css样式表

1 个答案: