refresh page content automatically

Question

refresh page content automatically

Navigation

#1 by (3 votes)

3

How can I display the changes made in the style sheet without using the meta refresh tag? Is this only possible using javascript?

css

asked by anonymous 15.09.2015 / 21:41

1 answer

Is there any way to disable the Scrapyd web interface? Verify which is the variable with greater value returning the variable not the value

score 3 · Accepted Answer

If you want the modifications made to the css files to be automatically reflected in the page, I find it difficult, unless you find a way to notify the browser that a new version of CSS is available.

You could even try to do a manual control, where all your css files would have an add-on link reporting the latest version, type arquivo.css?versao=3 and whenever you include a new version on the server, the it would even notify the browser using a websocket.

If all you want is not having the job of using CRTL + F5 while building your site / app layout, then I do not think you have a solution simple for your problem.

On the other hand, if you want to edit a CSS file through JavaScript, you can manipulate the CSSStyleSheet .

//Preparação - Criando um CSS Externo para o exemplo.
var blob = new Blob(
    [document.getElementById("templStyle").innerHTML],
    { type: "text/css" }
);
var link = document.createElement("link");
link.href = URL.createObjectURL(blob);
link.title = 'blob';
link.rel = 'stylesheet';

document.head.appendChild(link);

//Inicio do Exemplo.
var getStyleSheetByTitle = function (title) {
    return [].filter.call(document.styleSheets, function(styleSheet, indice) {
        return styleSheet.title == title;
    })[0];
}

var getStyleSheetRule = function (styleSheet, selector) {
    return [].filter.call(styleSheet.rules, function(rule, indice) {
        return rule.selectorText == selector;
    })[0];
}

var btAtualizarCss = document.getElementById("btAtualizarCss");
btAtualizarCss.addEventListener("click", function (event) {
    var cssBlob = getStyleSheetByTitle("blob");
    getStyleSheetRule(cssBlob, "span:hover").style.color = null;
    getStyleSheetRule(cssBlob, "label").style.color = "yellow";
})

<span>Span: Hello World</span>
<br />
<label>Label: Hello World</label>
<br />
<button id="btAtualizarCss">Remover Hover do Span e Mudar Cor do Label</button>

<!-- este template será utilizado para poder criar um CSS Externo para este exemplo -->
<script id="templStyle" type="text/trmplate">
    span { color: green; }
    span:hover { color: yellow; }
    label { color: blue; }
    label:hover { color: red; }
</script>

I set the title of <link /> so that I had an easy way to find the right link, otherwise I would have to search CSS for href .