I'm building a webpage on which I want certain elements of a div to change (background color and logo) for users who enter the page from a specific redirect URL. Previously I would just make two separate versions of the page and get the redirect URL to point to the second one but with duplicate content a no no I was wondering if there was a dynamic solution that can make the changes to the original page?
You're looking for the document.referrer property:
if (document.referrer.indexOf("www.example.com") !== -1) {
// Do stuff if user is coming from example.com
$('#theDiv').css('background', 'red');
}
You can also check using regex or operators.
Extract the url-parameters using something like this: Get url parameter jquery Or How to Get Query String Values In js
Then use the parameters as a "flag" in ur code to change the look and feel with Javascript.
Pseudo code:
var urlColor = getURlParamater(Color)
switch(UrlColor){
case "blue":
setBackground(blue)
case "red":
setBackground(red)
default:
setBackground(white)
}
On the server, you can use the 'Referer' HTTP header to see where a user came from and give a different response accordingly. Browsers may not always provide this information to you however.
Alternately, if both the redirecting page and the destination page are on the same server, there are many other ways you could try tracking the user (eg. sessions, user-agent profiling, etc).
Two URLs, two brands, one code base
I'm assuming you want one set of HTML code served from two different URLs. You want to make it look like you have distinct web sites with different branding, but you want them to share all their content. And I'm assuming you want to do this all with HTML, Javascript, and CSS; no server side path mapping.
This approach requires a few steps but will be forward compatible to as many brands as you want.
Step 1
Move your style definitions to a set of external style sheets. You should have a global.css (for common styles) plus a style sheet for each of your background color/logos (say, company1.css and company2.css). (If you don't know how to define image URLs in the CSS, click here).
Step 2
If your two sites are on different domains (e.g. http://www.company.com and http://www.company2.com) then use location.host to detect which brand to display.
var companyName = document.location.host.split('.')[1]; //take middle segment, e.g. in "www.company1.com" extract the "company1"
OR
If your two sites are on the same domain, but with different paths (e.g. http://myhosting.com/company1 and http://myhosting.company2 then use document.location plus perhaps the split function to parse the URL and figure out which brand to display.
var companyName = document.location.split('/')[4] //your code may differ depending on your path scheme
Step 3
See this article on how to use Javascript to dynamically switch stylesheets.
Ta-da
When you're done it'll look a little bit like this:
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);
Related
So it's kind of a dumb question but I'm really wondering how I can make this :
user type www.mydomaine.com/something
page display : something
and it does with anything he type after the domain name
I've no idea how I could do that. I know I can get an info from an URL with jQuery but how can i remove the thing like index.html in the url? My guess would be with the htaccess?
Also, there won't be any other page but this with some design, how can I make sure someone doesn't go anywhere else but on the page that display what he wrote after the domain name?
I hope that's clear, thanks for reading and your answers !
Pierre
When creating an anchor tag and adding an href (or making a URL) I needed the URL to have a protocol (http or https), so I made a validation to add it, and then you can access the parameters of the URL easier.
Also, if you want to remove the / from the pathname you can use a .replace('/', '') when using parser.pathname
For removing index.html from the URL, you can split the path and get only the first element, or the ones you need f.e. parser.pathname.split('/')[0]
var myUrl = "www.mydomaine.com/something"
if (!myUrl.startsWith('http')) myUrl = 'http://' + myUrl;
var parser = document.createElement('a');
parser.href = myUrl;
console.log(parser.pathname);
// Other option
var theUrl = new URL(myUrl);
console.log(theUrl.pathname);
I used this as a reference.
So I'm trying to make a switch statement that will embed the following code in the document head when the page is a certain URL:
<meta name="robots" content="noindex">
Currently, I have it looking like this:
switch(document.URL){
case "url/i/want/to/noindex":
var m = document.createElement('meta');
m.name = 'robots';
m.content = 'noindex';
document.head.appendChild(m);
break;
...
}
However, it doesn't seem to work as intended. Am I going about this wrong?
Most search engines are going to ignore this since they are scraping the HTML not post-processed DOM information. That said, what you are looking for is more like this:
if (window.location.href.indexOf("url/i/want/to/noindex") >= 0) {
var m = document.createElement('meta');
m.name = 'robots';
m.content = 'noindex';
document.head.appendChild(m);
}
document.URL and window.location.href are going to return the URL path including domain name, protocol, port, etc. So you'll want to search for just your URL path. You can come up with many clever ways including regular expressions to either match a pattern or to filter out the stuff that comes prior to the URL path. You can also use window.location.pathname instead, but I am not sure what browsers support it.
The short of it is that the test condition in your switch statement does not match. For instance, document.URL on this very page is:
http://stackoverflow.com/questions/37977060/dynamically-creating-noindex-meta-tags-for-certain-urls/37977662#37977662
I created a bilingual website using two databases:
www.martyregan.com/
www.martyregan.com/jp/
You can choose the language of the website using the 'Website Language' flags, but currently the links only bring you to the homepage. The paths/URLs on both sites are exactly the same, other than /jp/ directory on the Japanese site.
I'm looking for a way to alter the hyperlinks to go to the parallel page, based on the URL of the page the visitor is currently on. I figure it'd be quite simple being that the paths are identical, but not really sure where to start with my little knowledge of jquery.
This assumes your language is accessible as seen below.
"http://" is removed from the URL for convenience.
$(function(){
var lang = 'jp';
$('a').attr('href', function(x, url){
var split = url.replace(/(http:)?(\/\/)?/, '').split('/');
return split.shift() + '/' + lang + '/' + split.join('/');
});
});
You may be able to get away with using the <base> tag depending up on the browsers you need to support. You can just set that to whatever the base is by acquiring it from the server.
If you want to use jQuery to do it, it should be fairly simple if all of your hrefs are absolute:
$("a").attr('href', function (_, href) {
return $("base").attr('href') + href;
});
This assumes that you are using <base>. If you're not you can get the path from window.location.path, or even some other element on the page.
In case you are confused, the JavaScript is only required if <base> is not enough to work on its own
I like that the current address is nicely split up into sections in window.location, but I would like to be able to take an arbitrary URL and split it up following the exact same logic. I don't know how window.location handles corner cases and rare scenarios, so I would like to avoid doing this manually if possible. Since the browser is already doing this work on the current address I'm hoping it contains a function that can do it to any address.
If there are any nice cross-browser libraries (perhaps jQuery plugins) out there I'd love to hear about them too.
You could create an a (HTML Anchor Element) element in JavaScript and specify the href attribute. Then you'll be able to call the properties associated with an anchor element, hash, protocol, host, port etc...
https://developer.mozilla.org/en-US/docs/DOM/HTMLAnchorElement
Using the info in Xander's answer I've written a small function that parses an URL and returns an object with the desired information. I thought I'd share it here:
function parse_url(url)
{
var e = document.createElement('a');
e.href = url;
return {
'protocol': e.protocol,
'hostname': e.hostname,
'host': e.host,
'port': e.port,
'pathname': e.pathname,
'search': e.search,
'hash': e.hash
}
}
Let's say that location.href is http:/domain.com/en/ at the moment.
After a click I want it to be http://domain.com/en/#opened-File.html/1
This way I know what URL I need, so if a user copies and shares this URL I am doing:
$(document).ready(function(){
var info = window.location.hash.match(/^#([^\/]*)\/([^-]*)-(.*)$/),
url="", nivel="", seccion="";
if (info) {
url = info[1];
nivel = info[3];
seccion = info[2];
location.href = url;
}
}
Wich works fine, but my questions are:
is this a good aproach?
is this seo-frendly?
would you do it differently?
this works together with
$('nav a').each(function(){
if(!$(this).hasClass('enlaceAnulado')){
/*Recopilamos*/
var href = $(this).attr('href');
var id = $(this).attr('id');
var parts = id.split("_");
var seccion = parts[0];
var nivel = parseInt(parts[1])+1;
/*Quitamos el enlace*/
$(this).attr('href','javascript:void(0)');
/*Guardamos la información.*/
$(this).data('hrefnot',href);
$(this).data('nivel',nivel);
$(this).data('seccion',seccion);
$(this).addClass('enlaceAnulado');
}
});
So the links where static but i do this to improve user experience and load content via ajax
Search engine indexes your page content as if the url has nothing that follows the hash. Hash navigation is only intended for the browser to maintain a navigation history. You should always make the content you want to be indexed static. Consider this as an answer to all three questions of yours.
is this a good approach?
My first inclination is to think that this is a good job for the server-side (php, python, asp.net, apache rewrite, etc.)
is this seo-frendly?
I would worry about the hash, and instead utilize better Url practices.
would you do it differently?
I would rather have my server parse (mod rewrite, etc) the Url instead of javascript.
I'd like to add the following to Nikita Volkov's answer:
Search crawlers generally don't run JavaScript code (although Google is trying to change that). This means that redirecting the user to a static page using JavaScript, like what you're doing with this:
location.href = url;
...is not going to work.
If you want to make URL's with hash tags more SEO-friendly, you'll have to do it server-side.