“包括" js和css文件，使用js文件中的相对路径 [英] "include" js and css file using a RELATIVE path from js file

问题描述

使用Symfony 2.8.24和jQuery 3.2.1

Using Symfony 2.8.24 and jQuery 3.2.1

现在已经有一段时间进行了谷歌搜索，是的，有很多类似的案例，涉及使用相对路径进行资源加载，但是我没有发现任何可以解释我需要的东西，所以:

Been googling for this for a while now and, yes, there are lots of similar cases, involving using relative paths for resource loading but, none I have found which explains what I need, so SO:

我需要在js文件的同一文件夹中包含(或加载或追加到head或其他内容)css文件(为简单起见，请放心说). (这是 real 问题)，使用相对路径，(这是 real real 问题)，相对于js文件，而不是文件.

I need to include (or load or append to head or something) a css file which is (lets say for simplicity) in the same folder as the js file, I'm trying to do so (and this is the real problem) using a relative path to it, (and this is the real real problem) relative to the js file, NOT the html file.

我真的不知道这是否有可能，所以，不可能"是一个有效的答案.

I really don't know if this is even possible so, you know, IMPOSSIBLE is a valid answer.

当然，这全是可移植性，我要制作的此插件使用了几个css和js文件，它们都位于插件文件夹结构内的不同文件夹中，我打算将其包括(或加载或附加到head或其他内容)，如果需要的话.如果能够做到这一点，而使该过程忽略了插件的顶层文件夹的复制位置，那么每次在另一个项目中使用它时，都不必更改绝对路径.

Also, the whole point of this is portability of course, this plugin I'm trying to make uses several css and js files all sitting in different folders inside the plugin folder structure and I intend to include (or load or append to head or something) each one if and when necessary. If I could do that making the process oblivious of where the plugin's top folder is copied, I would not have to change the absolute paths every time I use it in a different project.

当前/不需要的状态:

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);
}

对我有见解和想法！

推荐答案

一个棘手的技巧是使用Error.stack，它在当前浏览器中受支持，但尚未标准化.

A tricky hack would be to use Error.stack, which is supported in current browsers but is not yet standardized.

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文件:

Then just call c1CssImport() where you like to include relative-url based css files:

c1CssImport('./ui.css');

注意:

• 您不需要jQuery
• 该脚本仅包含一次CSS
• 此脚本未处理绝对URL
• 我不知道其他域中包含的js文件是否可以处理此技术(未经测试)

对于js，我建议使用js模块

For js includes i recommentd using js modules

这篇关于“包括" js和css文件，使用js文件中的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！