Saturday, November 17, 2012

jQuery Refresh Page Extension

There are three scenarios when a web page refreshes:

  1. Honors your cache (does not make resource requests).
  2. Verifies your cache (causes resources to generate 304s).
  3. Ignores your cache (causes resources to generate 200s).

For a simple page refresh you want your webpage to generate as few server requests as possible. There any many ways to refresh a page in JavaScript, however they can all have different and sometimes undesirable results. Let's look some code snippets of the aforementioned scenarios in reverse order.

3. Ignore Cache

window.location.reload(true);

This scenario is not usually necessary unless you know that the resources of your page have been updated. Also, using a good minification framework is probably a better way of ensuring that your clients always consume the latest resources with every request.

2. Verify Cache

window.location.reload();

This is obvious similar to the first call, only we are calling an override of the reload method that tells the browser to respect cache. However, this will still cause a series of 304 requests!

1. Honor Cache

window.location.href = window.location.href;

This is obviously a very simple way to refresh the page, and it will honor cache without forcing 304 requests. However, this will not work if your includes a hash tag.

jQuery Plugin

This little jQuery plugin will refresh the page and try to cause as few resource requests as possible.

(function($) {
    $.refreshPage = refreshPage;
    
    function refreshPage(reload) {
        if (reload === true) {
            window.location.reload(true);
            return;
        }
        
        var i = window.location.href.indexOf('#');
        if (i === -1) {
            // There is no hash tag, refresh the page.
            window.location.href = window.location.href;
        } else if (i === window.location.href.length - 1) {
            // The hash tag is at the end, just strip it.
            window.location.href = window.location.href.substring(i);
        } else {
            // There is a legit hash tag, reload the page.
            window.location.reload(false);
        }
    }
})(jQuery);
Shout it

Enjoy,
Tom

No comments:

Post a Comment

Post a Comment

Real Time Web Analytics