在SPA中加载外部脚本和样式文件

Load External Script and Style Files in a SPA

本文关键字：样式 文件 脚本 外部 SPA 加载      更新时间：2023-09-26

我有一种SPA类型，它使用API来获取数据。这个SPA有一些实例，它们都使用通用的样式和脚本文件。所以我的问题是，当我更改这些文件中的一行时，我必须打开每个实例并更新文件。这对我来说真的很耗时。

其中一种方法是将这些文件放在服务器的文件夹中，然后根据时间更改版本，但如果我使用这种解决方案，我将丢失浏览器缓存：

<link href="myserver.co/static/main.css?ver=1892471298" rel="stylesheet" />
<script src="myserver.co/static/script.js?ver=1892471298"></script>

ver值是根据时间生成的，我不能使用浏览器缓存。我需要一个从API更新这些文件的解决方案，然后所有的SPA都将被更新。

在head标签中，您可以添加以下代码：

<script type="text/javascript">
        var xmlhttp = new XMLHttpRequest();
        var url = "http://localhost:4000/getLatestVersion"; //api path to get the latest version
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var tags = JSON.parse(xmlhttp.responseText);
                for (var i = 0; i < tags.length; i++) {
                    var tag = document.createElement(tags[i].tag);
                    if (tags[i].tag === 'link') {               
                        tag.rel = tags[i].rel;
                        tag.href = tags[i].url;
                    } else {
                        tag.src = tags[i].url;
                    }
                    document.head.appendChild(tag);
                }
            }
        };
        xmlhttp.open("POST", url, false);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send();
  </script>

您的api路径应该允许来自处理上述代码的网站的"CORS"。您的api应该返回如下json数据：

var latestVersion = '1892471298'; //this can be stored in the database
var jsonData = [
    {
        tag: 'link', 
        rel: 'stylesheet', 
        url: 'http://myserver.co/static/main.css?ver=' + latestVersion
    }, 
    {
        tag: 'script', 
        rel: '', 
        url: 'http://myserver.co/static/script.js?ver=' + latestVersion
    }
];
//return jsonData to the client here

如果你更改了JS或CSS中的任何内容，那么你必须更新浏览器缓存，你所能做的就是更新特定的JS版本——不是所有版本，它应该反映在浏览器中。

在API中添加一个方法，返回文件的上次修改时间，然后将值插入"ver="后的"src"/"href"属性中

相关文章：