Clear Links to Current Page with Unobtrusive JavaScript Version Two
To recap, I wanted some unobtrusive JavaScript that would automatically strip any link that was pointing to the current page. The problem with the first version was that initially, I didn't take anchors into account. A link to a page with an anchor was considered a different URL than one with an anchor. Then next step was to strip the links of all URLs that pointed to the current page regardless of the anchor. This time I went too far since we'd still want skip and top of page links to be active.
In really thinking through the anchors issue, I've come to the following conclusions:
- If there's a link on the current page with an anchor on it, we don't want to remove the link. Examples: skip and top of page links.
- BUT, if there's a link to the current page without an anchor then we do want to remove the link.
Therefore, I introduce CLCP: Version Two (.js).
function clearCurrentLink(){
var a = document.getElementsByTagName("A");
for(var i=0;i<a.length;i++)
if(a[i].href == window.location.href.split("#")[0])
removeNode(a[i]);
}
function removeNode(n){
if(n.hasChildNodes())
for(var i=0;i<n.childNodes.length;i++)
n.parentNode.insertBefore(n.childNodes[i].cloneNode(true),n);
n.parentNode.removeChild(n);
}You can also give it a test run.
The only thing that changed from the previous version was the check to see if the link that I'm intending to strip had an anchor on it.
Feel free to leave any suggestions or browser compatibility issues. And thanks to Gabriel Mihalache for the suggestions.
UPDATE: Thankfully, I've got some smart people who read this site. Mark Wubben correctly made the observation that I do not need to split the href of the link that I'm checking. I've updated the code above. Here's the old code:
a[i].href.split("#")[0] ==
window.location.href.split("#")[0]
&& a[i].href.indexOf("#") == -1...which was changed to...
a[i].href == window.location.href.split("#")[0]As you can see, the logic is much more succinct.
Conversation
I think the logic is a bit off there. Why split the anchor part of the href if it isn't allowed to have an anchor part at all?
Re: Mark Wubben (Nov 19)
So that if there is an anchor, you can make sure that it is not on a different page.
Sorry, completely the wrong answer there. I'll try again...
The page is /test.html, and on the page is a link to /test.html, and a link to /test.html#top.
If you do not split the anchor part of .href and just check to see if the link and window's .hrefs are equal, going to http://www.mysite.com/test.html#top
a) won't remove the link to /test.html
b) will remove the link to /test.html#top which is usually not desirable
How about values encoded in the URL (ie. /test.html?myvar=1)? As long as it wasn't navigation related (eg. /test.html?page=1), or needed to remain in the URL between pages for some reason, you might want to check for those too.
Now we're getting into regular expression country.
Dave: to address the parameter issue you mention, the code currently sees /test.html?myvar=1 and /test.html?myvar=2 as two seperate URL's. The code could be revised to take this into account but chances are, url parameters indicate a completely different "page" and as a result, it seems best left as is. IE: ?myvar=1 and ?myvar=2 generate two unique pages and therefore a link to one should not disable a link to the other.
Jonathan,
Thanks for the handy code.
I noticed that when you request a page by domain name, window.location.href returns "http://www.mysite.com/" instead of "http://www.mysite.com/index.html", so my links to "index.html" are ignored by the script.
So I modified your clearCurrentLink function to add the full index page address (whatever it is) to any window.location.href ending in "/". Hope that helps someone.
Lines changed in clearCurrentLink:
...
var indexpage = "index.html"
var url = window.location.href;
if(url.substr(url.length-1,1)=="/")
url = url + indexpage;
for(var i=0;i
I'm trying to use the code on this page for my site, but it doesn't work because my links point to index.htm files, and are not recognized.
I'm interested in the code the last guy sent, but it's trimmed, so...
Wouldn't this be more appropriate to be done on the server side?
Absolutely, for that I shall refer you to Faux Active Link over at Maratz.com. He's got some PHP code that does just that talks of such. The code I present is simply another option.
A nice little script you've put together! I tested it on a page with a lot of links. The result got me wondering why it only removed half of the links and what I found out is that the loop criteria a.length actually gets updated for each step.
If you then have a page with 20 links that you want to remove the script starts stepping through the loop, but when i hits the value 10 it will actually stop because 10 links has already been removed from the page and a.length will therefore be 10.
A modified version of the loop that removes all links could look like this:
var a = document.getElementsByTagName("a");
while (a.length > 0)
{
removeNode(a[0]);
a = document.getElementsByTagName("a");
}
How about a script that DOES remove anchor links, but not the other links?
Thanks to a post on one of my favorite forums I was refered here, I have a question I want to use the script but not sure where I should be placing the code. Before the head tag or at the bottom. thank you
Michelle
I spend one day on it, but it's a success.
Thanks a lot for your helpfull script.
Not sure it will be used at the end, but i apreciate a lot.
Best regards
Frederic
Awesome. Been wanting to do this for awhile. I got it running in seconds.
Thanks a bunch. Nice blog.
Does this script work with relative URLs in IE6? I can't seem to get it to work with my local machine in IE (should I be surprised??).
kylierose: yeah, it's unlikely that it'll work locally since I believe the href returned from the browser ends up being something like: c|//documents and settings/... and not just the filename as you'd likely have in the HTML.
hmmm - yes that's what i found too. unless you specify absolute paths (which is pointless if you are coding in HTML and using DW Library items - or any other repeated nav elements). Firefox and Opera work like a dream though! Thanks so much for sharing this solution with the world!
So close but no cigar!?
Just what I was looking for... but it only removes half of the links! I'm using the script to remove links that are empty or refer to the current page. Unfortunately, I'm confounded as to why it's leaving every other empty href? Any clues?
automatyk: It's hard to say for sure what might be happening. Did you simply drop the code in as-is or make any additional changes? It's possible that removing the node is affecting the length of the nodelist. Which means, you'd have to decrement
ieach time you remove a node.Jonathan, I'm using your code exactly as is. I'm linking to the clearlink.js from the page and using it to remove the empty links from a series of pictures. For example:
<img src="myimg.jpg">
Thank you.
sorry... the example above should be:
<p><a href="" onclick="popup(this.href)"><img src="someimage.jpg"></a></p>
I got it to work(almost). I created another array that collects the empty HREFs. Another FOR loop cycles through that array calling the removeNode function.
Works well in Firefox but chokes under IE for some reason.
Hi Jon, I'de like to have something like this in place of my forums content links.
I'm trying to hide all outbound links on the page. The reason being is we don't want anonymous users to access our links.
Very nifty, thanks. I modified it slightly to strip the link content (images or text, etc) for specific URLs (not just the current page).
Just wanted to say thanks. I regularly work with legacy-generated web templates, and plan to use this technique (combined with Rasmus Johansson's tweak above) to remove all of the <font> tags generated on the sites I'm tweaking.
http://tinraovat.myvnc.com/raovat/index.php?mod=vip
Above site seem has Source Code ! Any who help me show it on where segment on it's html. I want use it for my blog
hello world