Archivo para la categoría ‘Estándares’

Validate target attribute XHTML Strict or HTML 4.0 Strict

Saturday, 17 de May, 2008

For the standards lovers here we have a trick to simulate the “target” attribute behavior without break HTML 4.0 Strict o XHTML 1.0 Strict standards.

We will use the “rel”attribute with the ”external” value that validates correctly with the above standards. We will make an script that will look for all “<a>” elements with “rel” attribute equals to “external” and then will assign a new “onclick” event to it that open in a new window the URL stored on the “href” attribute .

<a href="http://www.equipo24.com" rel="external">Nice site developed with mootools</a>

Here we have the javascript for Mootools and another general solution without need of externals libraries.

Mootools

function fix_external_links() {
	$ES('a').each(function(el) {
		if (el.getProperty('rel') == 'external') {
			el.addEvent('click', function(e) {
				e = new Event(e);
				e.stop();	
				window.open(this.getProperty('href'));
			}.bind(el));
		}	
	});
}

window.addEvent('domready', function() { 
	fix_external_links();
});

Without external libraries

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;