更改从特定URL进入的用户的页面元素

Question

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

Answer 1

您正在寻找document.referrer财产：

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

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

Answer 2

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

然后将参数用作＆＃34;标记＆＃34;在你的代码中用Javascript改变外观。

伪代码：

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

Answer 3

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

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

Answer 4

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

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

这种方法需要几个步骤，但可以根据需要向前兼容。

第1步

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

第2步

如果您的两个网站位于不同的网域（例如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"

OR

如果您的两个网站位于同一个网域，但路径不同（例如http://myhosting.com/company1和http://myhosting.company2，请使用document.location加上split函数来解析网址并找出要展示的品牌。

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

第3步

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

的Ta-DA

当你完成它时，它看起来有点像这样：

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);