§ 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
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate() function is rather simple and straightforward, so I find it quite odd that Chrome can't handle it. I do…
- Joaquin Serra on "window.onload via double delegate function" - Hello, i'm using this function one year but i realized now that in Google chrome doesn't work. Have you got some solution?
- tadd on "Javascript function to add css" - thanks for the post
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate function just needs to be available, so include it once somewhere in your html file or an included javascript…
- Neil Haskins on "window.onload via double delegate function" - I don't understand exactly how this is to be used; I've just used javascript in a cut and paste manner really. Does the whole code go…
