如何始终刷新ajax加载的文件，避免缓存文件

First I load external JavaScript file with following code (it appends ext_chat.js script source to current DOM):

首先,我使用以下代码加载外部JavaScript文件(它将ext_chat.js脚本源附加到当前DOM):

var protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
(function(d, t, p) {
   var g = d.createElement(t),
      s = d.getElementById('Chat_Script');
   g.src = p + 'mydomain.lc/js/ext_chat.js';
   s.parentNode.insertBefore(g, s.nextSibling);
}(document, 'script', protocol));

Inside the ext_chat.js. Here I'm including the CSS file:

在ext_chat.js里面。这里我包括CSS文件:

function r(f) { 
/in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f()
}

r(function () {
    includeCSSfile(getBaseUrl() + '/css/ext_chat.css')); // getBaseUrl() gives correct url
});

function includeCSSfile(href) {
    var head_node = document.getElementsByTagName('head')[0];
    var link_tag = document.createElement('link');
    link_tag.setAttribute('rel', 'stylesheet');
    link_tag.setAttribute('type', 'text/css');
    link_tag.setAttribute('href', href);
    link_tag.setAttribute('media', 'screen');
    head_node.appendChild(link_tag);
}

On first load, the CSS file is included fine. After the first time, when the page is loaded all changes to the ext_chat.css file are not reflected, and cached file is being used instead. How can I force the CSS file to reload every time the page loads, instead of referring to the cached one?

首次加载时,CSS文件包含在内。第一次加载页面后,不会反映对ext_chat.css文件的所有更改,而是使用缓存文件。如何在每次加载页面时强制CSS文件重新加载,而不是引用缓存的文件?

1 个解决方案

#1

First things first, don't use the eval version of setTimeout. Use .bind instead.

首先,不要使用setTimeout的eval版本。请改用.bind。

/in/.test(document.readyState) ? setTimeout(r.bind(null, f), 9) : f()

Now, to avoid a file caching you should just attach a random query string to the end of the URI. Usually you'll see ?v=123456789 or something to that effect. We can just use a timestamp in this case.

现在,为了避免文件缓存,您应该将随机查询字符串附加到URI的末尾。通常你会看到?v = 123456789或类似的东西。在这种情况下,我们可以使用时间戳。

r(function () {
    includeCSSfile(getBaseUrl() + '/css/ext_chat.css?v=' + Date.now())); // getBaseUrl() gives correct url
});

Reading material:

#1