logo标签列表

<style>标签中内容的相对路径

html
4

有没有一种方法可以更改<script>标签内容的“当前工作目录”？ 我服务器上的目录结构如下：

├── css
│   ├── flexigrid.css
│   └── images
│       ├── bg.gif
│       ├── ...
│       └── wbg.gif
└── js
    └── flexigrid.js

3 directories, 21 files

如果我在<head>标签中只有以下标记，那么我就没问题了：

<link rel='stylesheet' type='text/css' href='/css/flexigrid.css' />

但是我正在使用JavaScript将文件内容作为文本加载并插入到头部：

// 'css' is a string containing the text of flexigrid.css
var css_el = document.createElement('style');
css_el.type = 'text/css';
css_el.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(css_el);

因此，样式表中类似这样的行：

background: #eee url(images/line.gif) repeat-y -1px top;

使用像 /images/line.gif 这样的 URL，而不是 /css/images/line.gif。有没有一种方法可以创建 <style> 标签，使得 url() 调用从 /css 目录开始，而不是基本目录，而无需在 javascript 中进行搜索和替换？

啊，我漏掉了最后一句话。你使用 JavaScript 插入“样式”，但不想使用 JavaScript 来正确格式化/呈现插入的“样式”，有什么原因吗？ - David Thomas
我正在使用JavaScript加载样式表，因为我想创建自包含插件，这些插件使用js / html / css，但仅由一个“require（）”类型的调用组成。我正在处理一个大型代码库，其中我不知道每个css文件的情况，如果我只是在css内容上使用“.replace（）”，那么我很容易引入错误（例如，如果文件包含指向images/和images/some-other-plugin/images/的路径）。 - aaronstacy
2个回答
3
这种将CSS内联的做法，会失去CSS缓存和数据能力，这是两个重要的问题。
对于小图片，如圆点或线条，可以将它们转换成data: URL，就不必担心相对URL。
1
我原以为即使我将内容作为文本而不是 CSS 加载，文件仍会被缓存。例如，如果我多次点击“刷新”按钮，服务器日志显示浏览器没有重新请求相关的 CSS 文件。 - aaronstacy
1
哪个CSS文件？包含CSS文本的HTML文件已被缓存，但如果您在多个HTML文件中使用相同的CSS文本，则服务器必须在每个HTML文件中发送它，因为浏览器（或代理或服务器）无法缓存页面的部分。 - brianary
我正在将CSS文件作为文本加载，然后将其插入到<style>标签的innerHTML中。使用这种技术，浏览器仍然会缓存CSS文件（服务器仅在浏览器第一次加载页面时才收到CSS请求）。因此，似乎我仍在获取缓存，但我没有获得相对路径的好处。 - aaronstacy
哦，所以是通过脚本修改DOM，而不是服务器端包含CSS？ - brianary
是的，CSS没有@base url(…)命令，因此，由于您要绕过浏览器对CSS相对URL的内置支持，您需要在注入CSS之前执行类似于replace(/url\(images/g,'url(/css/images')的操作。 - brianary
1

最终，您可以创建一个带有mod_rewrite指令的.htaccess文件。

但我认为使用JavaScript或CSS的方法是不可能的。

使用JavaScript是可能的，但使用HTML和CSS则不行。 - David Thomas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接