javascript - 使用 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);
    });
};

每次加载页面时，您都会加载“不同”的脚本。