根据URL不同设置不同的背景颜色

Question

我想强调一个web应用程序从何处加载：本地开发环境还是测试或生产环境。 为了简单起见，机制应该只在CSS上工作。但到目前为止，我的CSS是一个静态文件。

是否可能编写一种CSS，根据浏览器上加载的URL（localhost vs其他主机）来评估使用什么背景颜色？

我希望能够基于CSS条件规则获得解决方案。

- Queeg

Answer 1

我不认为这是使用CSS实现的，但你可以使用JavaScript来实现。检查当前访问的URL是否包含特定字符串，然后更改样式，当然你也可以在if语句中添加一个类。

如果您在答案中运行此代码段，则为蓝色，如果您在本地主机上运行此代码，则将为红色。

if (window.location.href.indexOf("stackoverflow") > -1) {
  document.body.style.backgroundColor = 'red';
} else {
  document.body.style.backgroundColor = 'blue';
}

以下截屏将展示如何根据在浏览器中输入的URL有效地更改背景颜色。

没有使用localhost名称时; 使用了localhost名称时; 为了忽略主机名后面的所有内容并仅查看主机名和端口，可以使用以下代码段中的location.host。

if (window.location.host.indexOf("localhost") > -1) {
  document.body.style.backgroundColor = 'red';
} else {
  document.body.style.backgroundColor = 'blue';
}

- FUZIION

---

请忽略数组，那是我目前正在进行的测试的一部分。 - FUZIION

好的，我可以尝试匹配 ://localhost，这样问题就不会真正发生。但是这将把任务移交给向我的 UI 框架添加 JavaScript。那我会尝试研究一下。 - Queeg

好的，很高兴我能帮到你。 - FUZIION

@HiranChaudhuri 只是出于好奇，你正在使用什么UI框架？ :) - VilleKoo

由于某些原因，我仍在使用Vaadin 8。 - Queeg

@FUZIION 是的，有截图的答案更好。 - Parking Master

Answer 2

虽然被接受的答案是我问题的正确答案，但我找到了一个解决方案，我想与他人分享，也可能是未来的自己。

由于在Vaadin 8中不可能直接将JavaScript添加到生成的HTML输出中（请参见此处和此处），因此对我来说更容易稍微更改应用程序。

所以在应用程序中，我添加了像这样的代码。 我知道它没有检查请求是否要去本地主机 - 但它检查客户端是否在与服务器相同的计算机上，这基本上意味着相同。

public class App extends UI implements View {

    @Override
    protected void init(VaadinRequest request) {
        if ("127.0.0.1".equals(request.getRemoteAddr()) || "localhost".equals(request.getRemoteAddr())) {
            this.addStyleName("dev-environment");
        }
    }
}

现在由于有一个新的CSS类名在使用中，对CSS进行简单的调整就可以解决问题：

// emphasize we are on localhost. The application sets the class name 'dev-environment' in this case
.dev-environment {
    background-color: #EEF0FF;
}

- Queeg