动态资产urls ( html文档中的.js和.css文件)
我有一个html文档，其中包含以下代码：
...
<head>
...
<link href="//assets.example.com/css/bootstrap.min.css" rel="stylesheet">
<script src="//assets.example.com/js/bootstrap.bundle.min.js"></script>
</head>
...上下文：
这个html文档位于微控制器的尖峰上。该芯片承载一个小型的and服务器，可以提供静态文件(例如，这个html文件)。可以从因特网(automation.example.com)或我的本地wifi网络(192.168.0.49:1337)访问wifi服务器。
问题:
从芯片的内存中读取静态文件非常缓慢(当我请求自托管css时，从when服务器获得HTTP 200大约需要7s )。
这就是为什么我将所有的css/js文件移到我的CDN中。现在的反应是闪电般的快，但我必须考虑的情况下，互联网是下降(资产不会加载)，我只能通过我的本地网络到达芯片。
解决方案:
我想从我的cdn中加载那些资产，如果芯片是从互联网上到达的(带有绝对urls)，或者如果(相对urls)关闭，则从加载。
换句话说，我正在考虑以下逻辑:如果浏览器的url是一个ip或以".local“(多播dns)结尾，那么请包含如下内容：
<link href="/bootstrap.min.css" rel="stylesheet">否则，如果浏览器url是我的域"example.com"，请如下所示：
<link href="//assets.example.com/css/bootstrap.min.css" rel="stylesheet">你能帮我处理js密码吗？我只能使用客户端代码。我相信我需要window.location.hostname和一些正则表达式，但是是否有更优雅的方法来做到这一点呢？
到目前为止，我一直在尝试，但没有取得任何巨大的成功：
<head>
...
<script>
let hostname = window.location.hostname;
let cdn = '';
if ('automation.example.com' === hostname) {
cdn = '//assets.example.com';
}
var head = document.getElementsByTagName('head')[0];
head.insertAdjacentHTML('beforeend', '<link href="' + cdn + '/css/bootstrap.min.css" rel="stylesheet">');
head.insertAdjacentHTML('beforeend', '<link href="' + cdn + '/css/login.css" rel="stylesheet">');
head.insertAdjacentHTML('beforeend', '<script src="' + cdn + '/js/bootstrap.bundle.min.js"></script>');
</script>
</head>它不喜欢“脚本”插入部分：Uncaught SyntaxError: '' literal not terminated before end of script
也许我需要承诺避免闪现DOM
回答 1
Stack Overflow用户
发布于 2022-01-05 00:23:15
<head>
...
<link id="aaa" href="//assets.example.com/css/bootstrap.min.css" rel="stylesheet">
<link id="bbb" href="//assets.example.com/css/login.css" rel="stylesheet">
<script id="ccc" src="//assets.example.com/js/bootstrap.bundle.min.js"></script>
<script>
let hostname = window.location.hostname;
let cdn = ''; // SPIFFS
if ('automation.example.com' === hostname) {
cdn = '//assets.example.com';
}
// bootstrap.min.css
let aaa = document.getElementById('aaa');
aaa.href = cdn + '/css/bootstrap.min.css';
// login.css
let bbb = document.getElementById('bbb');
bbb.href = cdn + '/css/login.css';
// bootstrap.bundle.min.js
let ccc = document.getElementById('ccc');
ccc.src = cdn + '/js/bootstrap.bundle.min.js';
</script>
</head>这是可行的，但我正在寻求一个更优雅的解决方案。它尝试从cdn加载资产，而不管上下文(internet/本地网络)。如果我们有互联网，它会请求两次文件，这不是什么大问题，因为它们是缓存的。如果我们没有互联网，它将从芯片的文件系统加载。
编辑:关于解决方案，请参见@ColdIV的评论。
https://stackoverflow.com/questions/70585881
复制相似问题
腾讯云开发者
