動態資產網址（html 文檔中的 .js 和 .css 文件）

Question

我有一個包含以下代碼的 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 文檔位於微控制器的 SPIFFS 中。 該芯片擁有一個微型網絡服務器，可以提供 static 文件（例如，這個 html 文件）。 可以從 Internet (automation.example.com) 或我的本地 wifi 網絡 (192.168.0.49:1337) 訪問網絡服務器。

問題：

從芯片的 memory 讀取 static 文件非常慢（當我請求自托管 cs 時，從網絡服務器獲取 HTTP 200 大約需要 7 秒）

這就是我將所有 css/js 文件移動到我的 CDN 的原因。 現在響應速度快如閃電，但我必須考慮互聯網關閉（資產無法加載）並且我只能通過本地網絡訪問芯片的情況。

解決方案：

如果從互聯網（使用絕對 url）訪問芯片，我想從我的 cdn加載這些資產，或者如果互聯網關閉（使用相對 url）從 SPIFFS 加載這些資產。

換句話說，我正在考慮以下邏輯：如果瀏覽器的 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

也許我需要 Promises 來避免 DOM 的閃爍

Answer 1

<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 加載資產。 如果我們有互聯網，它會請求兩次文件，這沒什么大不了的，因為它們被緩存了。 如果我們沒有互聯網，它將從芯片的文件系統加載。

編輯：請參閱@ColdIV 對解決方案的評論。

動態資產網址（html 文檔中的 .js 和 .css 文件）

問題描述

1 個解決方案

解決方案1
0 2022-01-05 00:23:15

動態資產網址（html 文檔中的 .js 和 .css 文件）

問題描述

1 個解決方案

解決方案1 0 2022-01-05 00:23:15

解決方案1
0 2022-01-05 00:23:15