首页 | 源码下载 | 网站模板 | 网页特效 | 广告代码 | 网页素材 | 字体下载 | 书库 | 站长工具
会员投稿 投稿指南 RSS订阅

栏目导航

热点推荐

阅览排行

当前位置：主页>设计在线>CSS教程>资讯:新窗口打开超链接的正确方法

新窗口打开超链接的正确方法

www.jz123.cn  2009-08-21   来源:   中国建站    IdealBoy    我要投递新闻

　　老方法原文开始：-------------------------------------------------------------------------------------------------------------------------------

　　最早知道的可通过验证的新窗口打开方法是阿捷的这篇文章http://www.w3cn.org/article/tips/2005/107.html

　　利用JS去实现，但是这种方法有一个坏处，有时候会使得这段JS与其它和JS冲突!

　　于是，我找到了另外一种纯CSS的打开新窗口的办法http://www.lanrentuku.com/js/css-191.html

　　可是这种方法却通不过验证，那么只好加点手段了!

　　先将这段CSS代码转换为JS代码http://tool.chinaz.com/Tools/Html_Js.aspx

　　得出代码如下：

　　//blank新窗口

　　document.writeln("<style type="text/css">");

　　document.writeln("<!-- ");

　　document.writeln(".blank a{test:expression(target="_blank");}");

　　document.writeln("}");

　　document.writeln("-->");

　　document.writeln("</style>");

　　由于一般网页都会有调用JS的代码，所以上面这段代码你只需要插入网站里主要的JS即可!再在HTML中的head区用JS调用这段CSS：

　　<script type="text/javascript" src="skin/default/js/js.js"></script>

　　最后在你需要打开新窗口的地方加入：

　　class="blank"即可!

　　如：

　　<div id="footer" class="blank">

　　------------------------------------------------------------------------------------------------------

　　回复13楼的问题：“能说说好处吗”

　　这里是我鲁莽了，没有写清楚这篇文章的最大好处，上面只是以通过验证的方法去介绍，其实这种方法最大的好处是大量精简代码!

　　如果按照当初阿捷那篇文章的方法所做的话，不但有时候会跟其它JS效果产生冲突引致失效!

　　并且也会产生很多多余的代码!我举个例子显示我这种方法简洁性!

　　传统方法是每一个打开新窗口的链接都需要加一句"traget="_blank",也就是说每个超链接都需要是

　　"<a href="http://www.yourhome.com" traget="_black">超链接</a>",

　　这样就不会断产生大量的多余的"traget="_blank"了!

　　而阿捷的文章也差不多，产生大量的"rel="external"

　　但我这种方法却能省掉这些多余的代码!

　　示例：

　　当我希望网站底部所有的超链接都是以新窗口的方式去打开的(因为通常网站底部都是放友情链接或者一些其它需要以新窗口去打开的超链接)!那么我只要这样就行了：

　　<div id="footer" class="blank">

　　<a href=“http://www.yourhome.com”>所有超链接一</a>

　　<a href=”http://www.yourhome.com“>所有超链接二</a>

　　<a href=“http://www.yourhome.com”>所有超链接三</a>

　　</div>

　　或

　　<div class="footer blank">

　　<a href=“http://www.yourhome.com”>所有超链接一</a>

　　<a href=”http://www.yourhome.com“>所有超链接二</a>

　　<a href=“http://www.yourhome.com”>所有超链接三</a>

　　</div>

　　您看,这是否很方便很简洁呢?只需要在包含你希望以新窗口打开的地方加上这么一句"class="blank"，那么整个class里所有的超链接都是以新窗口的方式打开的!

　　老方法原文结束：-------------------------------------------------------------------------------------------------------------------------------

　　新方法开始：------------------------------------------------------------------------------------------------------------------------------------

　　优点：

　　1、可通过W3C严格校验

　　2、调用更灵活(只需要在以新窗口打开的区域加入一句class="blank")

　　3、代码更简洁(不需要在每一句A标签里加traget="_blank“或rel="external")

　　PS：Internet Explorer6、Internet Explorer7、Firefox3、Opera9四种浏览器测试有效

　　(Opera浏览器必须修改浏览器首选项，方法:“工具”——“首选项”——“弹出窗口”——不选择“屏蔽全部弹出窗口”即可)

    HTML代码

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

　　<head>

　　<title>新窗口打开方式(可通过校验,灵活调用,代码简洁)</title>

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

　　</head>

　　<body>

　　<div class="blank">

　　<a href=" http://www.baidu.com" >百度</a><br />

　　<a href=" http://www.google.cn" >谷歌</a><br />

　　<a href=" http://www.cssrain.cn" >前端技术(JS部分由前端技术站长cssrain提供,俺不会JS)</a><br />

　　<a href=" http://www.idealboy.cn" >理想男孩(没空整)</a>

　　</div>

　　<script type="text/javascript" src="blank.js"></script>

　　</body>

　　</html>

    JS 代码

    
function ByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "-");
var oRegExp = new RegExp("(^|s)" + strClassName + "(s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
   }
}
return (arrReturnElements);
}
var blanks = ByClassName(document, "*", "blank");
for (var i=0;i<blanks.length;i++ ){ 
var urls = blanks[i].getElementsByTagName("a");
for (var j=0;j<urls.length;j++ ){
  urls[j].target="_blank";  
}
}


上一篇：HTML 5 Reset Stylesheet 下一篇：用CSS自定义热区

相关文章列表

评论总数：0 条 [ 查看全部 ] 网友评论


关于我们 ┆ 隐私版权 ┆ 广告服务 ┆ 友情链接 ┆ 联系我们 ┆ 网站地图