CSS/JS 中的动态 URL
Posted
技术标签:
【中文标题】CSS/JS 中的动态 URL【英文标题】：Dynamic URLs in CSS/JS 【发布时间】：2010-10-25 22:03:16 【问题描述】：我正在拆分我的一个较大的应用程序并引入一个“cdn”网址来容纳 CSS、javascript 和图像等常见对象以避免重复。不过，我需要做的是为我们的开发环境提供单独的 URL，所以我可能有：
http://cdn-dev.example.com
http://cdn-qua.example.com
http://cdn.example.com
取决于我们在什么环境中工作。我可以让它为我们的 php 代码生成的东西工作，但我对将被调用的 .css 和 .js 文件不知所措。例如，我该如何制作：
.cool-button background-image: url('http://cdn.example.com/images/button.png');
在不同域之间切换？
最好的办法是什么？
[编辑]
大家都清楚，CDN 地址是与站点不同的域。因此，开发站点可能是http://www-dev.domain.com，它将使用http://cdn-dev.domain.com
【问题讨论】：
【参考方案1】：只使用域相关的网址？
.cool-button background-image: url('/images/button.png');
然后浏览器会在当前域下查找。
【讨论】：
【参考方案2】：我今天确实一直在做同样的事情，这就是我想出的。
将此粘贴在您网站根目录下的 .htaccess 文件中。这显然依赖于 Apache 和 Mod_rewrite。
RewriteEngine on
RewriteBase /
# Redirect content to the CDN
RewriteCond %HTTP_HOST !^cdn\.server\.com$ [NC]
RewriteRule .*\.(jpg|gif|png|flv|css|js|swf)$ http://cdn.server.com/$0 [R=301,L]
这会将括号中文件类型的请求发送到您的 cdn，并将其他类型的请求保留在您的主服务器上。
【讨论】：
这不是违背了 CDN 的目的吗？这意味着客户端仍然必须为对 CDN 的每个请求与您的服务器联系，而不是直接访问 CDN。 是的，但不会从您的服务器提供内容。因此，不是从您的服务器传送 5Mb FLV。它将被重定向到实际下载发生的 CDN。此配置允许您轻松地从单个服务器开发环境切换到您的实时环境，而无需进行任何更改。我不提倡将其作为 的方式来做到这一点。它对我有用，301 的微小往返是值得的。 如果您在 CDN 上有一些文件而在本地有其他文件，这将如何工作？ 不会。这只是在我的情况下工作的一个例子【参考方案3】：使用相对路径，而不是绝对路径。在 CSS 文件中时，路径是相对于 CSS 文件而非 html 页面的。
如果您的 CSS 文件在这里
http://cdn.example.com/css/style.css
你的班级是
.cool-button background-image: url('../images/button.png');
然后浏览器会尝试从
http://cdn.example.com/images/button.png
【讨论】：
通常我会将 images 文件夹放在 CSS 主题文件夹下，因为它允许我使用不特定于特定样式表文档的图像名称。我将能够在 /this_theme/ 下拥有一个 button.png，在 /that_theme/ 下拥有相同的文件名，并且类定义可以保持不变。 不要将相对/绝对 URI 路径与绝对/相对 URI 混淆。因为/css/style.css是绝对URI路径，而是相对URI。而http://cdn.example.com/css/style.css（以http://开头）是绝对URI而不是URI路径（它只包含URI路径）。
当然，这仅在您将 css 文件托管在与图像完全相同的域中时才有效，通常情况并非如此
何必在 CDN 上托管与样式表相关的图像而不是样式表本身？【参考方案4】：
如果服务器相同，则可以使用相对路径。像 /http/blah/test/images/button.png 或 ../images/button.png
【讨论】：
【参考方案5】：使用相对 URL 时，您可以强制使用“基本”URL。 在
标记中，使用供参考：http://www.w3schools.com/TAGS/tag_base.asp
【讨论】：
但这也有缺点。例如，仅具有片段标识符foo 的 URI 引用将在同一文档中解析为 /#foo 而不仅仅是 #foo。【参考方案6】：
您还可以有一个构建过程并使用模板来生成特定于环境的文件
例如在名为 yoursite.template.css 的文件中
.cool-button background-image: url('@@URL@@/images/button.png');
创建 yoursite.css 文件，而不是将 @@URL@@ 替换为您想要的域。
【讨论】：
【参考方案7】：嗯...我想出的解决方案是...有点... hackish、丑陋和愚蠢。但是，见鬼，它奏效了：
<?php
if ($_SERVER['SERVER_NAME'] == "www.domain.tld")
$incs_path = "/usr/local/psa/home/vhosts/domain.tld/non-web-root-folder/private-files";
else
$incs_path = "incs";
require_once "$incs_path/$file-to-be-called.inc";
?>
如前所述，这既笨拙又丑陋，可以做得更漂亮。但它至少允许您根据主机定义特定文件组的特定位置。
【讨论】：
和域相关的 url 可能会更漂亮、更有用。我想，我的建议对于链接到其他私人信息更有用（我倾向于将这种东西用于数据库密码等网络应用程序）。【参考方案8】：根据您的服务器配置，您还可以将 .php 扩展名附加到您的文件名中，并将它们也视为 PHP 脚本：
I.E.: style.css.php would contain:
.cool-button background-image url(<?php echo $bgImgUrl;?>);
这也适用于 JavaScript 文件。
【讨论】：
【参考方案9】：在寻找这个问题的答案时，我看到了一个简单的方法：使用重复的类创建您的 css 文件，一个用于场景 1（从同一域加载图像），另一个用于场景 2（从 CDN 加载图像）。
例如
.container background-image:url(my/site/image.png;)
.container-CDN background-image:url(http://my.site.cdn.com/image.png;)
然后在你的 index.php 中引入 PHP 来调用正确的类
例如
<body class="container<?PHP if ($whatever) echo "-CDN"; ?>">
【讨论】：
我最喜欢这个，谢谢你的提示。将它与 sass 一起使用应该很容易。以上是关于CSS/JS 中的动态 URL的主要内容，如果未能解决你的问题，请参考以下文章