Question

嗨，希望有人能提供帮助。

我有一个实时网站，也有一个开发网站，我在部署之前测试新代码，但基本上它们具有相同的内容，例如

直播= www.myserver.com/live/index.html
发展= www.myserver.com/development/index.html

有没有办法设置（比方说）CSS背景属性取决于用于到达网站的网址。

我当前的CSS =

body {
    background: #eff;
    /* change this to background: #ccc; if on development site */
    margin:25px;
}

为什么呢？好吧，我经常发现自己在错误的网站上上传或测试新代码。

我知道这不是一个大问题，但如果我能够直观了解我正在测试哪个网站，那么这个问题很有用。

感谢您的关注。

现已解决感谢@Adam Buchanan Smith，@ Dekel和Green先生的投入。我有点使用@ Dekel的逻辑，但是按照以下几行将其改为jQuery：

<script>
$(document).ready(function(){
// Set background dependent upon url i.e. www.myserver.com/cab or www.myserver.com/cab2
// cab2 is the development site, cab the live site
// Also change text in div id="live" from 'Live Site' to 'Development Site' if arrives at by cab2   
    if (document.location.pathname.indexOf('cab2') > -1){
    $('body').css({"background":"#BFFFDF"});
    document.getElementById('live').innerHTML = "Development Site";
    } else {
        $('body').css({"background":"#efffff"});
        document.getElementById('live').innerHTML = "Live Site";
    }
}
</script>

感谢所有人的兴趣！

Answer 1

不是你可以在纯html / css中做的事情，但你可以使用javascript和服务器端语言。

在javascript中，您可以检查document.location.hostname或document.location.pathname是否检查您当前正在使用的域名/网址。

在javascript中您可以使用：

if (document.location.pathname.indexOf('development') > -1) {
    body = document.getElementsByTagName('body')[0]
    body.setAttribute('class', body.getAttribute('class') + ' development')
}

使用PHP，您可以使用$_SERVER['REMOTE_HOST']和$_SERVER['REQUEST_URI']。

if (strpos($_SERVER['REQUEST_URI'], 'development')) {
    echo "<body class=\"development\">";
} else {
    echo "<body>";
}

在css文件中，您可以使用：

body {
    background: #eff;
}
body.development {
    background: #ccc;
}

Answer 2

理论上这样的事情可以使用document.referrer;

在纯粹的javascript中为你工作

<body onload="checkURL()">
</body>
<script>
function checkURL(){
var testPage = "www.testpage.com";
var livePage = "www.livepage.com";
var lastPage = document.referrer;

if (lastPage == livePage){
//do something here
}
else if {lastPage == testPage}
//do something else
}
else{
//umm what did you do?
}
</script>

根据到达的URL更改背景

2 个答案: