代码之家 › 专栏 › 技术社区 › dragonmantank

CSS/JS中的动态url

dynamic-css css javascript php

dragonmantank · 技术社区 · 17 年前

我正在拆分我的一个较大的应用程序,并引入一个“cdn”url来存放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

9 回复 | 直到 17 年前

great_llama 17 年前

使用相对路径,而不是绝对路径。在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

gnud 17 年前

只使用域相对url?

.cool-button { background-image: url('/images/button.png'); }

Robbie 17 年前

您还可以有一个构建过程,并使用模板生成特定于环境的文件

e、 g.在名为yoursite.template.css的文件中

.cool按钮{背景图像:url('@@url@@@images/button.png');}

创建yoursite.css文件,然后将@URL@替换为所需的域。

Christian Studer delphist 17 年前

根据您的服务器配置,您还可以将.php扩展名附加到文件名中,并将其作为php脚本处理:

I.E.: style.css.php would contain:

.cool-button { background-image url(<?php echo $bgImgUrl;?>); }

这也适用于JavaScript文件。

Greg B 17 年前

我今天也在做同样的事情,下面是我的想法。

将其粘贴到站点根目录中的.htaccess文件中。这显然依赖于Apache和Mod_重写。

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]

newyuppie 15 年前

在寻找这个问题的答案时,我也看到了一个简单的答案:使用重复类创建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";} ?>">

NinethSense 17 年前

如果服务器相同,则可以使用相对路径。比如/http/blah/test/images/button.png或../images/button.png

Joe Frambach Joe Frambach 17 年前

使用相对url时,可以强制使用“基本”url。在<头>标记、使用<基本href=”http://cdn-dev.example.com“>。然后,每个相对链接“/style.css”将指向 http://cdn-dev.example.com/style.css "

http://www.w3schools.com/TAGS/tag_base.asp

David Thomas 17 年前

嗯……我想出的解决办法是……有点……粗俗、丑陋、愚蠢。但是,见鬼,它奏效了:

<?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";

?>

如前所述,这是一个既简陋又丑陋的过程,可以做得漂亮得多。但它至少允许您根据主机为特定文件组定义特定位置。