Categories
Javascript

Auto-Refresh your Browser on file change

    How? Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page. Try it!

Where? Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.

<script type="text/javascript" src="http://livejs.com/live.js"></script>

There is another way to achieve this using jQuery
You could just place a javascript interval on your page, have it query a local script which checks the last date modified of the css file, and refreshes it if it changed.

var modTime = 0;
setInterval(function(){
  $.post("isModified.php", {"file":"main.css", "time":modTime}, function(rst) {
    if (rst.time != modTime) {
      modTime = rst.time;
      // reload style tag
      $("head link[rel='stylesheet']:eq(0)").remove();
      $("head").prepend($(document.createElement("link")).attr({
          "rel":"stylesheet",
          "href":"http://cp.swatantra.info/kb/"
        })
      );
    }
  });
}, 5000);
'Coz sharing is caring

By Swatantra Kumar

Swatantra is an Open Source evangelist, a technologist and researcher. Professionally, he does software development, software architecture, server administration and project management. When he's not writing software, he enjoys building web entities and servers, reading about and working with new technologies, and trying to get his friends to make the move to open source software. He's written, co-written and published many articles in international journals, on various domains/topics including Open Source, Networks, Computer Organization, Mobile Technologies, and Business Intelligence. He made a proposal for an information management system at University level during graduation days.

One reply on “Auto-Refresh your Browser on file change”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.