强制动态加载的 JavaScript 不在 google chrome 上缓存

Question

我正在开发谷歌地图加载器（使用谷歌地图 javascript API）。我想在可用时将点动态添加到路径中。 编辑：网页和 JavaScript 是在本地存储和加载的，而不是通过网络服务器。

为此，我创建了一个外部 javascript 文件，在其中放置了我想要使用的数据。

我使用我在 stackoverflow 上其他地方找到的一个很棒的技巧来加载 java 脚本对象：

function loadjsfile( filename, callback )
{
    var fileref = document.createElement( 'script' );
    fileref.setAttribute( "type", "text/javascript" );
    fileref.setAttribute( "src", filename );

    var done = false;
    fileref.onload  = fileref.onreadystatechange    = function()
    {
        if( !done && ( !this.readyState 
                                || this.readyState == "loaded" 
                                || this.readyState == "complete") )
        {
                done = true;

                // Continue your code
                callback();

                // Handle memory leak in IE
                fileref.onload = fileref.onreadystatechange = null;
                document.getElementsByTagName( "script" )[0].removeChild( fileref );
        }   
    };
    document.getElementsByTagName( "script" )[0].appendChild( fileref );
}

这非常有效，因为它会等到外部 javascript 实际加载后再继续初始化。

所以这一切都很棒，加载得很好。然后我设置了 5 秒的超时来重新加载外部 javascript 文件。这是我有问题的地方。 Google Chrome 正在从缓存中重新加载外部 JavaScript 文件，而不是直接加载到磁盘。这是一个巨大的痛苦，因为这意味着我的地图路径不会随着时间的推移而更新。我真的需要它。

当我刷新整个页面时，它重新加载了 JavaScript，但闪烁非常烦人（它迫使地图回到“初始”状态）。如果我可以强制它每次重新加载 javascript 文件，这个新方法将完美地工作。

那么有人可以帮助我吗？

我对 Javascript 很陌生（我主要是 C++ 编码员），所以如果我问一些愚蠢的问题，我深表歉意：D

Answer 1

如果没有其他人有其他想法，请尝试将随机数作为查询字符串附加到文件名中。这将告诉脚本该文件是新并且应该强制重新加载。

基本上每次都会生成一个随机数。

var rnd = Math.floor(Math.random()*80000);

所以你的代码看起来像这样

function loadjsfile( filename, callback )
{
    var rnd = Math.floor(Math.random()*80000);
    var fileref = document.createElement( 'script' );
    fileref.setAttribute( "type", "text/javascript" );
    fileref.setAttribute( "src", filename + "?r=" + rnd ); // note this line

    // other code...
}

Answer 2

您可以（如果您的文件托管在 apache Web 服务器上）将 .htaccess 文件添加到该目录，其中包含带有以下内容的脚本文件：

Header set Cache-Control "no-cache"

这将阻止文件被缓存。

还有其他方法可以发送这些标头信息。

Answer 3

您可以放置​​ date.now() ，而不是像 Marko 建议的那样使用随机数，它在每次新上传时绝对总是不同的，并且写入更加紧凑。
经过测试并适用于 Chrome、Opera、Edge 和 Firefox。

<script>
var script=document.createElement('script');
script.src='./mymodule.js'+ '?t=' + Date.now();
document.body.appendChild(script);
</script>