引用js时如何防止缓存

引用js时,防止缓存

场景:

我们有个js文件,被很多网站引用.

可是有一个问题:因为改bug或者优化 这个js文件后,由于网站缓存,导致引用的网站没有更新.

怎么办呢?

又不可能要求其他网站在js文件上加上随机数或者时间戳.这个我们掌控不了.

而且加上随机数有问题:每次都得重新加载,这样会影响用户体验,而且完全没有必要每次都重新加载.

方式一:使用jsonp/ajax

WEB-INF/static/html/convention.js.html 的内容:

callback222('<script type="text/javascript" src="/static/js/convention.js?aaa=123"></script>')

 达到了目的:

 

可是自动给我加上了随机数:

 这样的话,每次都会真正发送请求,但是没有修改js的时候,是可以使用缓存的.

我不需要随机数.

这种方式导致没法利用缓存.

 方式二:在js脚本中动态创建脚本

在引用的网站中引入如下js:

<script type="text/javascript"  >
loadJs("http://localhost:8081/static/html/convention.js.js?timestamp="+Math.random(),null);
</script>

 http://localhost:8081/static/html/convention.js.js 内容如下:

loadJs("/static/js/convention.js?aaa=222", null);

效果:

 第二次访问就使用缓存了:

 

loadJs 就是创建JavaScript节点,实现如下:

function loadJs(url, callback) {
    var done = false;
    var script = document.createElement('script');
    script.type = 'text/javascript';//do not 'application/javascript',because Low version of the browser is not compatible
    script.language = 'javascript';
    script.charset = "utf-8";
    script.src = url;
    //script.setAttribute('src', url);
    script.onload = script.onreadystatechange = function () {
        if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')) {
            done = true;
            script.onload = script.onreadystatechange = null;
            if (callback) {
                console.log('load ' + url + ' success.');
                callback.call(script);
            }
        }
    };
    document.getElementsByTagName("head")[0].appendChild(script);
};

我们以后修改bug时,只需要修改WEB-INF/static/html/convention.js.js中的版本号即可.

webapp 也遇到了相似的问题

 

解决方法: