§ External links to new windows
Ok, there's lots of REALLY HEATED discussions about this topic all over the web. I'm not looking for arguments; I'm just posting what I do here in this blog.
This all came about from running a validator. I don't particularly care about validation, but they are nice for finding broken HTML. Anyway, if you didn't know, the target attribute currently doesn't validate for strict doctypes, but is proposed to be valid again for HTML5. Whatever.
Since some people seem really emotionally invested in this issue, I thought I'd set up a compromise which lets me have my blog and you can eat it, too. Oh... sorry. Since this blog is really just for my benefit, I want it to handle links the way I want; namely, pages on other domains open in a new window. I also want my example pages to be in new windows.
On page load this grabs all the links and tries to decide if they go to another domain; I think the my externalDomain function works. I tried to find code that took care of it, but what I did find either didn't seem to work or worked but threw errors on some (ahem) browsers. Anyway, if it decides a link is external, it adds a classname ('extlink'). If I want a link to open a new window anyway, I manually add the classname to the link. An image, target, and title are added to the links that have that classname. Then forms on the page are checked and altered similarly.
I added the image after the submit buttons this way because it looks like input elements have to be a child of a block element to validate, so you can't necessarily just add it to the form.
var mydomain;
function externalUrls2NewWindow() {
mydomain = document.domain;
var mytarget = "_blank";
var mytitle = "Opens in new window";
var imgel = document.createElement('img');
imgel.src='images/external.png';
imgel.alt=mytitle;
imgel.className='extlink';
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++) {
if(externalDomain(links[i].href)) {
if(links[i].className.indexOf("newwinlink") == -1) {
links[i].className += " newwinlink";
}
}
if(links[i].className.indexOf("newwinlink")>-1) {
links[i].appendChild(imgel.cloneNode(true));
links[i].target = mytarget;
links[i].title = mytitle;
}
}
var forms = document.getElementsByTagName("form");
for(var i=0;i<forms.length;i++) {
if(externalDomain(forms[i].action)) {
for(var k=0;k<forms[i].elements.length;k++) {
if(forms[i].elements[k].type == "submit") {
forms[i].elements[k].parentNode.appendChild(imgel.cloneNode(true));
}
}
forms[i].target = mytarget;
forms[i].title = mytitle;
}
}
}
function externalDomain(url) {
var urlparts = url.split("://");
if(urlparts.length>1) {
urlparts = urlparts[1].split("/");
if(urlparts.length>0 && urlparts[0] != mydomain) {
return true;
}
}
return false;
}
function makeDoubleDelegate(function1, function2) {
return function() {
if (function1)
function1();
if (function2)
function2();
}
}
window.onload = makeDoubleDelegate(window.onload, externalUrls2NewWindow);
last edited on February 16th, 2009 at 6:48 PM
- Walid on "Adventures with Ubuntu 9.10 on G4 Yikes!" - I am in the same process as you. Although I still dual-boot to Windows for my ganimg leisure. My first contact with Ubuntu was way…
- Slashback on "Simpler adding & removing element classnames" - Actually, the addClassName function does what you want, pretty much the same way you suggest.
- angie on "Simpler adding & removing element classnames" - And what if I want to add a class, but keeping the csseals the element already has?I mean, I have an element with a class, let's name…
- backlinks on "Adjust iframe height to contents" - Definitely helped me.
- Slashback on "Simpler validate form fields are filled in (no additional class names)" - You are welcome!
