当前位置:主页 > 网页教程 > 网页制作 > div css > 内容欢迎大家投稿

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

时间:2009-10-02 21:39来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

 最早知道的可通过验证的新窗口打开方法是阿捷的这篇文章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 />

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接