如何刷新客户端INLINE JavaScript

Alpha2k

使用外部js文件时，浏览器可能被迫重新加载文件。看这里。

最近，我发现，至少在Chrome版本80.0.3987.132（如代码段示例）中也缓存了INLINE脚本：

<html>
    <head>
        <script>alert("I am cached!");</script>
    </head>

    <body>
        <script>alert("Me too!");</script>
    </body>
</html>

刷新内联脚本的方式是什么？

更新1：我必须提到返回内容的Web服务器正在使用HTTP 2.0

更新2：一种可行的解决方案是以辅助脚本为基础，并且在页面加载时通过ajax或websocket获得“真实”脚本内容，然后将其附加到头部，如下所示：

function addScript(content){
    let s = document.createElement('script');
    s.innerHTML = content;
    document.head.appendChild(s);
}

这可以完成工作，但不是最佳选择，因为它需要的请求超出了必要。

更新3：使用以下标头，从后端发送的标头似乎都不起作用：

Header().Set("Cache-Control", "no-cache, no-store, must-revalidate") // HTTP 1.1.
Header().Set("Pragma", "no-cache") // HTTP 1.0.
Header().Set("Expires", "0") // Proxies.

更新4：按照Jinxmcg的回答，文档https://v8.dev/blog/code-caching-for-devs Don’t change URLs提到：

我们可能有一天会决定将缓存与源文本（而不是源URL）相关联，并且该建议将不再有效。

可能这一天已经到来，它也适用于内联脚本。

谢谢大家的参与

最终解决方案（至少在我的情况下有效）：

1个后端标头：

w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate, max-age=0") // HTTP 1.1.
w.Header().Set("Pragma", "no-cache") // HTTP 1.0.
w.Header().Set("Expires", "0") // Proxies.

2 HTML，JS和CSS中的随机字符串，例如：

<html>
    <head>
        <style>
            --cache-color: #8528cc; //Random hex color generated by backend
        </style>
        <script>
            console.log("<?php echo date(); ?>");
            alert("I am cached!");
        </script>
    </head>

    <body>
        <div>Hidden DIV with a random value: <?php echo date(); ?></div>
        <script>
            console.log("<?php echo date(); ?>");
            alert("Me too!");
        </script>
    </body>
</html>

Jinxmcg

我认为浏览器仅在为该会话中的后续调用打开页面时才缓存嵌入式javascript，并且在关闭或刷新页面后不保留它。

但是，这意味着您的浏览器会从其缓存中获取HTML（包括JS）。因此，您可以尝试与页面一起发送一些标题，以强制浏览器不要使用其缓存的HTML副本并使用新的html + js。

为了测试它是HTML缓存还是“内联JS”缓存问题，请使您的html动态更改，并确认刷新时它正在更改，但内联JS执行不会更改。

您可以在此处找到有关js缓存的更多详细信息：https : //v8.dev/blog/code-caching-for-devs

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。