在 XHTML-Strict 模式下实现新窗口打开外部链接

熟悉 WEB 标准的朋友都知道,在 XHTML-Strict 模式下,不能给链接设置 target 属性,但是,通常我们都希望外部链接(非本站链接)能够在新窗口打开,如何解决这个冲突呢?本文给出了一个解决方法,希望对您有用!

在 XHTML-Strict 模式下实现新窗口打开外部链接 – 示例

本文的解决方法是在页面加载完成后先用 document.getElementsByTagName(‘a’) 获取页面上所有链接,然后通过搜索链接中是否包含站点 URL ,如果不包含,就说明是外部链接,这时,我们可以通过设置 setAttribute(‘target’, ‘_blank’); 来达到在新窗口打开的目的。

 
<script type="text/javascript">
<!--
 
// 说明:在 XHTML-Strict 模式下实现新窗口打开外部链接
// 作者:CodeBit.cn
// 链接:http://www.codebit.cn
 
function setExternalLinkTarget()
{
	// 从当前 url 中解析主机名
	var locationMatch = document.location.href.match(/^(http://)?([^/]+)/i);
 
	// 设置站点链接
	var siteUrl = locationMatch[2];
 
	// 获取页面上所有链接
	var allLinks = document.getElementsByTagName('a');
	var len = allLinks.length;
 
	if(len > 0)
	{
		var externalLink;
		for(i=0; i<len; i++)
		{
			// 设置当前链接
			externalLink = allLinks[i];
 
			// 如果链接 href 里面没有发现站点链接(外部链接)
			if (externalLink.href.indexOf(siteUrl) == -1)
			{
				// 设置 target 属性
				externalLink.setAttribute('target', '_blank');
			}
		}
	}
}
 
window.onload = function() {
	setExternalLinkTarget();
}
//-->
</script>

一个非常健全的 Javascript 链接(URL)解析类

用 Javascript 解析链接(URL)是一个常见的需求,本文介绍了一个非常健全的用 Javascript 写的链接(URL)解析类,他可以准确获取一个完整的 URL 中每个部分的内容,包括协议、URL中包含的用户名和密码、主机名、端口、路径名、参数、锚点(Fragment Anchor)等信息。

其实他的方法就是常见的正则匹配,但是整个实现写的很精巧,非常值得 javascript 新手研究。

一个非常健全的 Javascript 链接(URL)解析类 – 示例

 
<script type="text/javascript">
 
// 说明:一个非常健全的 Javascript 链接(URL)解析类
// 整理:http://www.CodeBit.cn
 
/** 
* @projectDescription 	Poly9's polyvalent URLParser class
*
* @author	Denis Laprise - denis@poly9.com - http://poly9.com
* @version	0.1 
* @namespace	Poly9
*
* See the unit test file for more examples.
* URLParser is freely distributable under the terms of an MIT-style license.
*/
 
if (typeof Poly9 == 'undefined')
{
	var Poly9 = {};
}
 
/**
 * Creates an URLParser instance
 *
 * @classDescription	Creates an URLParser instance
 * @return {Object}	return an URLParser object
 * @param {String} url	The url to parse
 * @constructor
 * @exception {String}  Throws an exception if the specified url is invalid
 */
Poly9.URLParser = function(url) {
 
	this._fields = {
		'Username' : 4, 
		'Password' : 5, 
		'Port' : 7, 
		'Protocol' : 2, 
		'Host' : 6, 
		'Pathname' : 8, 
		'URL' : 0, 
		'Querystring' : 9, 
		'Fragment' : 10
	};
 
	this._values = {};
	this._regex = null;
	this.version = 0.1;
	this._regex = /^((w+)://)?((w+):?(w+)?@)?([^/?:]+):?(d+)?(/?[^?#]+)???([^#]+)?#?(w*)/;
 
	for(var f in this._fields)
	{
		this['get' + f] = this._makeGetter(f);
	}
 
	if (typeof url != 'undefined')
	{
		this._parse(url);
	}
}
 
/**
 * @method 
 * @param {String} url	The url to parse
 * @exception {String} 	Throws an exception if the specified url is invalid
 */
Poly9.URLParser.prototype.setURL = function(url) {
	this._parse(url);
}
 
Poly9.URLParser.prototype._initValues = function() {
	for(var f in this._fields)
	{
		this._values[f] = '';
	}
}
 
Poly9.URLParser.prototype._parse = function(url) {
	this._initValues();
	var r = this._regex.exec(url);
	if (!r) throw "DPURLParser::_parse -> Invalid URL";
 
	for(var f in this._fields) if (typeof r[this._fields[f]] != 'undefined')
	{
		this._values[f] = r[this._fields[f]];
	}
}
 
Poly9.URLParser.prototype._makeGetter = function(field) {
	return function() {
		return this._values[field];
	}
}
 
</script>

示例代码:

 
<script type="text/javascript">
 
var url = 'http://user:password@www.codebit.cn:9901/pub/article.php?offset=10&perpage=10#fragment';
 
var p = new Poly9.URLParser(url);
 
document.write("<strong>URL:</strong> " + url + "<br /><br />");
document.write("解析结果如下:<br /><br />");
document.write("<strong>Protocol:</strong> " + p.getProtocol() + "<br />");
document.write("<strong>Username:</strong> " + p.getUsername() + "<br />");
document.write("<strong>Password:</strong> " + p.getPassword() + "<br />");
document.write("<strong>Host:</strong> " + p.getHost() + "<br />");
document.write("<strong>Port:</strong> " + p.getPort() + "<br />");
document.write("<strong>Pathname:</strong> " + p.getPathname() + "<br />");
document.write("<strong>Query String:</strong> " + p.getQuerystring() + "<br />");
document.write("<strong>Fragment:</strong> " + p.getFragment() + "<br />");
 
</script>

javascript 获取搜索引擎关键字并高亮显示

获取搜索引擎关键字并高亮显示能很大程度的提高用户体验,方便用户迅速找到自己需要的相关信息。本文介绍的是用客户端的 javascript 代码来实现这一目的。

示例:

您可以在 google 里搜索 "codebit.cn Javascript 锚点 平滑跳转" ,然后点击跳往本站的链接即可看到效果。

 
<script type="text/javascript">
<!--
// 说明:获取搜索引擎关键字并高亮显示
// 整理:http://www.CodeBit.cn

/* http://www.kryogenix.org/code/browser/searchhi/ */
/* Modified 20021006 to fix query string parsing and add case insensitivity */
function highlightWord(node,word) {
	// Iterate into this nodes childNodes
	if (node.hasChildNodes) {
		var hi_cn;
		for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
			highlightWord(node.childNodes[hi_cn],word);
		}
	}
	
	// And do this node itself
	if (node.nodeType == 3) { // text node
		tempNodeVal = node.nodeValue.toLowerCase();
		tempWordVal = word.toLowerCase();
		if (tempNodeVal.indexOf(tempWordVal) != -1) {
			pn = node.parentNode;
			if (pn.className != "searchword") {
				// word has not already been highlighted!
				nv = node.nodeValue;
				ni = tempNodeVal.indexOf(tempWordVal);
				// Create a load of replacement nodes
				before = document.createTextNode(nv.substr(0,ni));
				docWordVal = nv.substr(ni,word.length);
				after = document.createTextNode(nv.substr(ni+word.length));
				hiwordtext = document.createTextNode(docWordVal);
				hiword = document.createElement("span");
				hiword.className = "searchword";
				hiword.appendChild(hiwordtext);
				pn.insertBefore(before,node);
				pn.insertBefore(hiword,node);
				pn.insertBefore(after,node);
				pn.removeChild(node);
			}
		}
	}
}

function googleSearchHighlight() {
	if (!document.createElement) return;
	ref = document.referrer;
	if (ref.indexOf('?') == -1) return;
	qs = ref.substr(ref.indexOf('?')+1);
	qsa = qs.split('&');
	for (i=0;i<qsa.length;i++) {
		qsip = qsa[i].split('=');
		if (qsip.length == 1) continue;
		if (qsip[0] == 'q' || qsip[0] == 'p') { // q= for Google, p= for Yahoo
			words = unescape(decodeURIComponent(qsip[1].replace(/+/g,' '))).split(/s+/);
			for (w=0;w<words.length;w++) {
				highlightWord(document.getElementsByTagName("body")[0],words[w]);
			}
		}
	}
}

window.onload = googleSearchHighlight;

//-->
</script>

同时,您需要为要高亮的关键词设置一个样式:

 
<style type="text/css">
.searchword {
	background-color: yellow;
}
</style>

实现原理:

在页面加载完成时获取页面来源(document.referrer),并分析搜索引擎关键词,然后获取页面上所有元素,递归查询是否含有搜索关键字,如果有,就创建一个 span 元素,并应用关键词样式,替换原有节点。

Javascript 获取链接(url)参数的方法

有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值。本文给出的就是这个流程的具体实现方法。

当然,我们也可以用正则直接匹配,文章中也给出了一个正则的例子。

点此浏览示例文件

分解链接的方式:

 
<script type="text/javascript">
<!--
// 说明:Javascript 获取链接(url)参数的方法
// 整理:http://www.CodeBit.cn

function getQueryString(name)
{
	// 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空
	if(location.href.indexOf("?")==-1 || location.href.indexOf(name+'=')==-1)
	{
		return '';
	}

	// 获取链接中参数部分
	var queryString = location.href.substring(location.href.indexOf("?")+1);

	// 分离参数对 ?key=value&key2=value2
	var parameters = queryString.split("&");

	var pos, paraName, paraValue;
	for(var i=0; i<parameters.length; i++)
	{
		// 获取等号位置
		pos = parameters[i].indexOf('=');
		if(pos == -1) { continue; }

		// 获取name 和 value
		paraName = parameters[i].substring(0, pos);
		paraValue = parameters[i].substring(pos + 1);

		// 如果查询的name等于当前name,就返回当前值,同时,将链接中的+号还原成空格
		if(paraName == name)
		{
			return unescape(paraValue.replace(/+/g, " "));
		}
	}
	return '';
};

//http://localhost/test.html?aa=bb&test=cc+dd&ee=ff
alert(getQueryString('test'));
//-->
</script>

用正则匹配的方式:

 
<script type="text/javascript">
<!--
function getQueryStringRegExp(name)
{
	var reg = new RegExp("(^|\?|&)"+ name +"=([^&]*)(\s|&|$)", "i");  
	if (reg.test(location.href)) return unescape(RegExp.$2.replace(/+/g, " ")); return "";
};

//http://localhost/test.html?aa=bb&test=cc+dd&ee=ff
alert(getQueryStringRegExp('test'));
//-->
</script>