使用js文件的相對路徑“包含” js和css文件

Question

使用Symfony 2.8.24和jQuery 3.2.1

經過一段時間的搜索，是的，有很多類似的案例，涉及使用相對路徑進行資源加載，但是我沒有發現任何可以解釋我需要的東西，所以：

我需要在js文件的同一文件夾中包含（或加載或追加到head或其他內容）一個css文件（為簡單起見，請說一下），我正在嘗試這樣做（這是真正的問題），使用相對於js文件（而不是html文件）的相對路徑（這是真正的實際問題）。

我真的不知道這是否有可能，所以，不可能是一個有效的答案。

另外，這當然是可移植性的全部，我試圖使用的這個插件使用了幾個css和js文件，它們都位於插件文件夾結構內的不同文件夾中，並且我打算包含（或加載或附加到head或其他內容） ），如果需要的話。 如果能夠做到這一點，而使該過程忽略了插件的頂層文件夾的復制位置，則不必在每次在其他項目中使用它時都更改絕對路徑。

當前/不需要的狀態：

var cssId = 'cssId';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    $(link).attr({
       'id': cssId,
       'rel': 'stylesheet',
       'type': 'text/css',
       'href': urlBase + '/js/plugins/PluginName/main.css', //PROBLEM HERE
       //ideally previous line would be like: 'href': 'main.css',
       'media': 'all'
    });    
    head.appendChild(link);
}

見識和想法，就在我身上！

Answer 1

一個棘手的技巧是使用Error.stack，它在當前瀏覽器中受支持，但尚未標准化。

c1CssImport = function (location) { // todo: handle absolute urls
    const e = new Error();
    const calledFile = e.stack.split('\n')[2].match(/[a-z]+:[^:]+/);
    const calledUrl = new URL(calledFile);
    calledUrl.search = '';
    const target = new URL(location, calledUrl).toString();
    for (let el of document.querySelectorAll('link[rel=stylesheet]')) {
        if (el.href === target) return; // already loaded
    }
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = target;
    document.head.append(link);
    // todo: return a promise
}

然后，只需調用c1CssImport（），即可在其中包含基於相對URL的CSS文件：

c1CssImport('./ui.css');

注意：

• 你不需要jQuery
• 該腳本僅包含一次CSS
• 該腳本未處理絕對網址
• 我不知道其他域包含的js文件是否可以處理此技術（未經測試）

對於js，我建議使用js模塊