XHTML 1.1 标准下用js代码控制新建窗口打开超链接

评论(0)

        最近几天一直致力于新主题的浏览器兼容和W3C验证,其中在HTML代码验证上遇到了一个难题,在XHTML 1.0以及HTML4.0.1以上的文本标准下a标签(超链接)是没有target这个属性的,在网页设计中也就不能在新建窗口打开链接,如果你在代码用到了这一属性,那你肯定通过不了W3C的验证。那么在这么严格的文本标准下那些前端大人是怎么实现这一功能的呢?

        rel属性是XHTML1.1允许的标签之一,目前大都通过对rel属性增加一个“external”值然后用Javascript代码来甄别含有external的超链接,给这些超链接绑定一个增加target属性的事件,来达到新建窗口打开超链接的目的,这样一来target属性只在点击超链接时添加,便保证了代码能顺利通过W3C的验证。

  Javascript原版代码如下
出自《New windows with JavaScript and the target attribute》

    /*
JSTarget function by Roger Johansson, www.456bereastreet.com
*/
var JSTarget = function () {
	// Default configuration
	var config = {
		strAtt: 'class', // The attribute to be examined
		strVal: 'new-window', // The value to match
		strWarning: ' (new window)' // Warning text
	};
	function init(props) {
		// Check for DOM support
		if (!document.getElementById || !document.createTextNode) {
			return;
		}
		// If any properties were supplied, apply them to the config object.
		for (var key in props) {
			if (config.hasOwnProperty(key)) {
				config[key] = props[key];
			}
		}
		var oWarning;
		var oLink;
		var arrLinks = document.getElementsByTagName('a');
		var oRegExp = new RegExp("(^|\\s)" + config.strVal + "(\\s|$)");
		for (var i = 0, len = arrLinks.length; i < len; i++) {
			oLink = arrLinks[i];
			// If the attribute is class, check for className
			if ((config.strAtt === 'class') && (oRegExp.test(oLink.className)) || (oRegExp.test(oLink.getAttribute(config.strAtt)))) {
				oWarning = document.createElement("em");
				oWarning.appendChild(document.createTextNode(config.strWarning));
				oLink.appendChild(oWarning);
				oLink.target = '_blank';
			}
		}
	}
	return {
		init: init
	};
}();
    JSTarget.init({
    strAtt: 'rel',
    strVal: 'external',
    strWarning: ' (external link, opens in a new window)'
    });


        懂一点javascript的童鞋都能看出来,该代码会将所有rel属性中有external 值的链接后面都会增加一段警告external link, opens in a new window。所以我要将代码中关于插入警告的部分删除掉,不然我们的网页也太不没关了…….,删除后的代码如下:

/*
JSTarget function by Roger Johansson, www.456bereastreet.com 
Edited By XiangZi PangBu.Com
*/
var JSTarget = function () {
	// Default configuration
	var config = {
		strAtt: 'class', // The attribute to be examined
		strVal: 'new-window' // The value to match
	};
	function init(props) {
		// Check for DOM support
		if (!document.getElementById || !document.createTextNode) {
			return;
		}
		// If any properties were supplied, apply them to the config object.
		for (var key in props) {
			if (config.hasOwnProperty(key)) {
				config[key] = props[key];
			}
		}
		var oLink;
		var arrLinks = document.getElementsByTagName('a');
		var oRegExp = new RegExp("(^|\\s)" + config.strVal + "(\\s|$)");
		for (var i = 0, len = arrLinks.length; i < len; i++) {
			oLink = arrLinks[i];
			// If the attribute is class, check for className
			if ((config.strAtt === 'class') && (oRegExp.test(oLink.className)) || (oRegExp.test(oLink.getAttribute(config.strAtt)))) {
				oLink.target = '_blank';
			}
		}
	}
	return {
		init: init
	};
}();
    JSTarget.init({
    strAtt: 'rel',
    strVal: 'external'
    });


原文中还有Jquery框架下得脚本,因为没有测试过不知道代码怎么样就不整理了,有需要的童鞋可以到原文中去找下。
===============================================

PS:XHTML新规范中摒弃了一些之前标准无用的落后的非规范的东西,同样也摒弃了很多有用的东西如target属性,用js代码控制输出html代码属于无奈之举,毕竟我们在做网站的时候有很多情况下必须用到新建窗口打开链接,矛盾啊,也不知道这个标准是哪个傻×定的,幸好target属性已经在万众期待的HTML5中恢复了。