使用 document.createElement('script') 加载 javascript 时如何防止缓存？

Question

我正在使用 Aaron Smith 在 https://aaronsmith.online/easily-load-an-external-script-using-javascript/ 上描述的技术来动态加载 Javascript 代码。当我第一次创建代码文件时它工作正常，但如果我更改该文件，浏览器不会选择新版本。我认为这意味着代码正在浏览器中缓存。

这是我的代码，与 Aaron 的示例几乎相同：

const loadScript = (src) => {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.on   load = resolve;
        script.onerror = reject;
        script.src = src;
        document.head.append(script);
    });
};

如何确保用户始终加载我的代码的最新版本？我不想每次更新代码文件时都更改它的名称。我也无法要求用户重新配置他们的浏览器以运行我的解决方案。

Answer 1

简单地分配一个随机的查询字符串让浏览器认为它是不同的：

const loadScript = (src) => {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.onload = resolve;
        script.onerror = reject;
        script.src = src + `?dummy=${encodeURIComponent(Math.random())}`;
        document.head.append(script);
    });
};

每次加载页面时，您都在加载一个 'different' 脚本。

使用 document.createElement('script') 加载 javascript 时如何防止缓存？

How can I prevent caching when loading javascript with document.createElement('script')?

javascript

dynamic