【问题标题】：Change page elements for users entering from a specific URL更改从特定 URL 输入的用户的页面元素
【发布时间】：2017-01-29 07:43:31
【问题描述】：

我正在构建一个网页，我希望为从特定重定向 URL 进入页面的用户更改 div 的某些元素（背景颜色和徽标）。以前我只会制作页面的两个单独版本，并让重定向 URL 指向第二个，但是内容重复，不，不，我想知道是否有动态解决方案可以对原始页面进行更改？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您正在寻找document.referrer 属性：

if (document.referrer.indexOf("www.example.com") !== -1) {
    // Do stuff if user is coming from example.com
    $('#theDiv').css('background', 'red'); 
}

您也可以使用正则表达式或运算符进行检查。

【讨论】：

Referrer 仅在初次访问该站点时起作用。当用户在网站内四处点击时会发生什么？当他们通过书签到达时会发生什么？
他想检测“从特定重定向 URL 进入页面的用户”。这会丢弃通过书签到达的任何用户（referrer 将是一个空字符串）。如果他需要跟踪用户的点击，他总是可以将第一次到达的内容保存到 cookie/sessionstorage/localstorage。我认为这超出了问题的范围。

【解决方案2】：

使用以下内容提取 url 参数：Get url parameter jquery Or How to Get Query String Values In js

然后在你的代码中使用参数作为“标志”来改变 Javascript 的外观。

伪代码：

var urlColor = getURlParamater(Color)
switch(UrlColor){
     case "blue":
          setBackground(blue)
     case "red":
          setBackground(red)
     default:
          setBackground(white)
}

【讨论】：

【解决方案3】：

在服务器上，您可以使用“Referer”HTTP 标头来查看用户来自哪里并相应地给出不同的响应。但是，浏览器可能并不总是向您提供这些信息。

或者，如果重定向页面和目标页面都在同一台服务器上，您可以尝试使用许多其他方法来跟踪用户（例如会话、用户代理分析等）。

【讨论】：

【解决方案4】：

两个网址，两个品牌，一个代码库

我假设您希望从两个不同的 URL 提供一组 HTML 代码。你想让它看起来像你有不同品牌的不同网站，但你希望他们分享他们的所有内容。我假设你想用 HTML、Javascript 和 CSS 来做这一切；没有服务器端路径映射。

这种方法需要几个步骤，但可以向前兼容任意数量的品牌。

步骤 1

将您的样式定义移动到一组外部样式表中。您应该有一个 global.css（用于常见样式）以及每个背景颜色/徽标的样式表（例如，company1.css 和 company2.css）。（如果您不知道如何在 CSS 中定义图片 URL，请点击 here）。

第二步

如果您的两个网站位于不同的域（例如 http://www.company.com 和 http://www.company2.com），则使用 location.host 来检测要显示的品牌。

    var companyName = document.location.host.split('.')[1];  //take middle segment, e.g. in "www.company1.com" extract the "company1"

或

如果您的两个站点在同一个域中，但路径不同（例如http://myhosting.com/company1 和http://myhosting.company2，则使用document.location 加上split 函数来解析URL 并确定要显示的品牌。

var companyName = document.location.split('/')[4] //your code may differ depending on your path scheme

第三步

请参阅这篇文章了解如何use Javascript to dynamically switch stylesheets。

塔达

完成后，它看起来有点像这样：

var companyName = document.location.host.split('.')[1];
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.id   = 'branding';
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = companyName + ".css";  
link.media = 'all';
head.appendChild(link);

【讨论】：