个人中心
gpt4 book ai didi

javascript - 如何刷新客户端 INLINE javascript

转载 作者：行者123 更新时间：2023-12-01 15:21:18 25 4
gpt4 key购买 nike

使用外部 js 文件时，可以强制浏览器重新加载文件。见 here .

最近发现INLINE脚本也被缓存了，至少在Chrome 80.0.3987.132版本中，
片段示例:

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

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

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

更新 1:我不得不提到返回内容的网络服务器使用的是 HTTP 2.0

更新 2: 有效的解决方案是有一个辅助脚本作为基础，当页面加载时，通过 ajax 或 websocket 获取“真实”脚本内容，然后将其附加到头部，如下所示: 
function addScript(content){
    let s = document.createElement('script');
    s.innerHTML = content;
    document.head.appendChild(s);
}

这可以完成这项工作，但它不是最佳的，因为它需要比必要更多的请求。

更新 3:使用这些 header 从后端发送的 header 似乎都不起作用: 
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提到:

we may one day decide to associate caches with the source text rather than source URL, and this advice will no longer be valid.



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

感谢大家的参与

最终解决方案(至少在我的情况下有效):

1 后端 header : 
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>

最佳答案

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

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

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

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

关于javascript - 如何刷新客户端 INLINE javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60692337/

25 4 0
文章推荐： fasttext - fasttext 的句子向量
文章推荐： list - Prolog 成员/2 谓词
文章推荐： javascript - JavaScript 是否支持按字符串格式格式化数字？
文章推荐： javascript - 在 2 个分隔符之间拆分字符串并包含它们
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com