llaughlin
10/6/2014 - 2:04 PM

Chrome Snippet - Constantly reload page css

Chrome Snippet - Constantly reload page css

// css-constant-reload.js
// adapted from https://github.com/bgrins/devtools-snippets
// Removes then reloads all the CSS files in the current page every 5 seconds

(function () {

  function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
      parent.appendChild(newElement);
    } else {
      parent.insertBefore(newElement, targetElement.nextSibling);
    }
  }

  function reloadStyleSheet(stylesheet) {
    var element = stylesheet.ownerNode;
    var clone = element.cloneNode(false);
    clone.href = addRandomToUrl(clone.href);
    clone.addEventListener("load", function() {
      if (element.parentNode) {
        element.parentNode.removeChild(element);
      }
    });
    insertAfter(clone, element);
  }

  function addRandomToUrl(input) {
    // prevent CSS caching
    var hasRnd = /([?&])_=[^&]*/,
      hasQueryString = /\?/,
      hasHash = /(.+)#(.+)/,
      hash = null,
      rnd = Math.random();

    var hashMatches = input.match(hasHash);
    if (hashMatches) {
      input = hashMatches[1];
      hash = hashMatches[2];
    }
    url = hasRnd.test(input) ?
    input.replace(hasRnd, "$1_=" + rnd) :
    input + (hasQueryString.test(input) ? "&" : "?") + "_=" + rnd;
    if (hash) url += '#' + hash;
    return url;
  }

  window.setInterval(function(){  
    [].forEach.call(document.styleSheets, function(styleSheet) {
        if (!styleSheet.href) return;
        console.log('reload ' + styleSheet.href);
        reloadStyleSheet(styleSheet);
    });
  }, 5000);
})();