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.
Related
I'm trying to get all URLs from a page using jQuery to call them later on using $.get(). If they were on the same page as the script is included in, it would be no problem calling something like
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
alert(links[i].href);
}
In this case I'd just use alert to check that the links were actually parsed.
But how can I do the same thing with an URL that is not the current page?
Any help would be appreciated. Maybe I'm missing something ridiculously simple but I am really stumped when it comes to anything JavaScript/JQuery related.
Blatantly copying this answer by Nick Craver (go upvote it), but modifying it for your use case:
$.get("page.html", function(data) {
var data = $(data);
var links = data.find('a');
//do stuff with links
});
Note that this will only work if the page you're hitting is set up for cross-origin request. If it isn't, you'll need to do the same with a Dom-parser from a backend server. Nodejs has some great options there, including jsDom.
You will have to get the other page via an HTTP request ($.get in JQuery achieves this), and then either go about converting that HTML into a DOM that JQuery can then traverse and find the <a> tags for you, or use another method such as a regular expression to find all the links within the returned markup.
edit: Probably don't actually use a regex unless you have a guaranteed HTML format and can guarantee the format of all <a> tags on the page. By this point, it's probably just easier to parse the HTML for real.
Collect the current page URL using window.location.href and then match the same with the href of other "a" tags in the loop
var links = document.getElementsByTagName("a");
var thisHref = window.location.href;
for(var i=0; i<links.length; i++) {
templink = links[i].href;
if (templink != thisHref){// if the link is not same with current page URL
alert(links[i].href);
}
}
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);
I'm creating a website that's going to have hundreds of pages. I want each page to be shareable on Facebook and Twitter. I've already created these buttons but I also want to have their respective share counters next to my share buttons. I don't want to use the standard Facebook method they provide because the coding looks bloated.
Right, so after doing some research, I found this example on codepen.
This looks exactly what I want - very simple!
However, I need some clarification and basic help with how this javascript code works:
var permalink = 'http://codepen.io';
var getTwitterCount = function () {
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?
url='+permalink+'&callback=?', function(data){
var twitterShares = data.count;
$('.twitter .share-count').text(twitterShares);
});
};
getTwitterCount();
var getFacebookCount = function () {
$.getJSON('http://graph.facebook.com/?ids='+permalink+'&callback=?',
function(data){
var facebookShares = data[permalink].shares;
$('.facebook .share-count').text(facebookShares);
});
};
getFacebookCount();
This bit of code:
var permalink = 'http://codepen.io';
Does this have to be:
1) the url of the actual page I want shared, eg: http://www.example.com/page-1/
OR
2) Must this be the root of the domain name, eg: http://www.example.com/
?
Or am I missing something else?
If the answer is #1 above, then that means I have to include + edit this line for each page which isn't ideal because I have all my javascript code + plugins in ONE .js file to reduce http requests, so I'd prefer it that I don't have to add this javascript on-page for every page.
It would be the page that you want to share, but you could get around it without using a separate variable for each page by setting it to something like document.location.href for example?
I have a page which redirects to a url from parameters in query string like:
page.html?redirectUrl=index.html
Inside the page i have code like this:
window.localtion.href = redirectUrl;
It is requiements to use redirect url by parameters. The page contains secure sensitive data. Someone can make the url with javascript like:
page.html?redirectUrl=javascript:alert(document.getElementById("password").value)
and secure data can be stolen.
How to prevent bypass javascript code to window.localtion.href?
You might try putting the URL in an anchor element and checking the protocol:
var anchor = document.createElement("a");
anchor.href = redirectUrl;
if(anchor.protocol != "javascript:") {
window.localtion.href = redirectUrl;
}
However, I'm not sure how good the browser support is for this, since MDN lists it as an HTML5 feature.
This seems like it would work as long as you're not redirecting with it:
Javascript:
var field = document.getElementById("redirectUrl");
var newValue = String(field.value);
alert(newValue);
Basically, using the String constructor to "sanitize" the input.
These will probably help more with other cases:
https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet
https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet
Overall, I would recommend NOT using Javascript to sanitize input. If you're handling really sensitive or important data you are highly recommended to use a server-side language to validate and sanitize your input.
I'm using jquery to rewrite a list of links on the page. If the location.host is NOT the vendor location.host AND the cookie isn't set to a specific value then it locates the links and rewrites them to the alternate values. The code I'm using works great in FF but not in IE7. Please help!
<script type="text/javascript">
// link hider
var hostadd = location.host;
var vendor = '172.29.132.34';
var localaccess = 'internal.na.internal.com';
var unlock = 'http://internal.na.internal.com/Learning/Customer_Care/navigation/newhire.html';
// link rewriter
$(document).ready (
function style_switcher(){
//if not a vendor or not accessing from lms reroute user to lms
if (hostadd != vendor && $.cookie("unlockCookie") != unlock){
var linkData = {
"https://www.somesite.com": "https://internalsite.com/something",'../Compliance/something/index.html':'../somethingelse.html'
};
$("a").each(function() {
var link = this.getAttribute("href"); // use getAttribute to get what was actualy in the page, perhaps not fully qualified
if (linkData[link]) {
this.href = linkData[link];
}
});
}
});
</script>
What you could do, if you insert the links dynamic, is store them in a data attribute like data-orglink="yourlink" which wouldnt be transformed by the browser, then check on that -and if its in the object array - change the href. Do you have access to creating the data attribute?
IE7 have problems with internal links, because it puts the host info on, before JS can reach the link..
http://jsfiddle.net/Cvj8C/9/
Will work in all, but IE7. So you need to use full paths if to use JS for this function :(
You had some errors in your JS.
But it seems to work fine?
See: http://jsfiddle.net/s4XmP/
or am i missing something? :)