|
|
发表于 2009-8-18 16:30:19
|
|阅读模式
来自 中国广东阳江
本帖最后由 qq7273771 于 2009-8-30 13:14 编辑
本文有更改，请读者注意！
老方法:（原文在非IE浏览器中无效，故研究出新方法，在最底部）：
老方法原文开始：-------------------------------------------------------------------------------------------------------------------------------
最早知道的可通过验证的新窗口打开方法是阿捷的这篇文章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>
- 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;
- 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.getElementsByTagName("a";
- for (var j=0;j<urls.length;j++ ){
- urls[j].target="_blank";
- }
- }
IdealBoy
qq:7273771
转载恳请保留出处
|
评分
-
查看全部评分
|
|
那天鱼掉进了河里,悲伤地对我说:"你看不见我的眼泪,因为我身在水中!"
我反驳:"我能感觉你在流泪,因为听说你拒绝游泳"
百度蜘蛛往这来--------敌敌畏,黑旋风,雷达,鹤顶红,含笑半步钉...!!!
|
楼主|
发表于 2009-8-18 23:55:11
|
来自 中国广东阳江
不错不错