网页打开新窗口target=_blank不符合标准_经验交流

"there is no attribute target for this element(in this HTML version)"

原来在HTML4.01/XHTML1.0/XHTML1.1严格DOCTYPE下,target="_blank"、target="_self"等等语法都是无效的,我们只能通过JavaScript来变通实现。

有朋友问为什么不允许使用target="_blank"?这个属性很方便啊。呵呵,不知道W3C的专家们是怎么想的,据我所知,主要是“易用性、友好性”的问题,因为老外觉得不经过用户同意,没有明确提示就打开一个新窗口是不礼貌的。先不管这个取消是否合理,我们来看看解决办法。

rel属性
HTML4.0增加了一个新属性:rel,这个属性用来说明链接和包含此链接页面的关系,以及链接打开的目标。rel有许多的属性值,比如next、previous、chapter、section等等。我们要使用的就是rel="external"属性。原来这样写的代码:

<a href="document.html" target="_blank">
打开一个新窗口</a>

现在要写成这样:<a href="document.html" rel="external">打开一个新窗口</a>

这是符合strict标准的方法。当然还必须配合一个javascript才有效。

javascript
完整的代码JS如下:

function externallinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externallinks;

你可以把它保存成一个.js文件(比如external.js),然后通过外部联接方法调用:<script type="text/javascript" src="external.js"></script>

就是这样。

最后补充一句,我网站采用的target="new"在过渡型DOCTYPE下是允许的,但也不符合strict标准。下次改版时我将采用strict模式,将所有target="new"改成rel="external"。

本文参考了以下文章:

Kevin Yank的《New-Window links in a Standards-Compliant World》 
《Standards-based Replacement for target="_blank" in External links》 
2006.7.13更新
很多门户网站的首页全部是弹出式的,我估计至少在中国这种观念暂时还改不了,在这种情况下就不需要在每个链接下加rel,全代码如下:

<script   type="text/javascript">//<![CDATA[
function externalLinks() { 
    if (!document.getElementsByTagName) return; 
    var anchors = document.getElementsByTagName("a"); 
    for (var i=0; i<anchors.length; i++){  
        var anchor = anchors;
        if   (anchor.getAttribute("href"))    
        anchor.target ="_blank";
    }
}
window.onload = externalLinks;
//]]></script>

时间: 2025-01-24 20:03:24

网页打开新窗口target=_blank不符合标准_经验交流的相关文章

用javascript来控制 链接的target 属性的代码_经验交流

在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题.         HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部

指定网页的doctype解决CSS Hacking方法总结_经验交流

但是实际上,浏览器远远不止这几个,Firefox分为Firefox 1.5,Firefox 2,Firefox 3几个主要版本,IE7,IE6中也各有好几个系列,另外除开这两个主流厂商的产品之外,还有Opera,Konqueror,Netscape,chrome等一系列. 这些浏览器,各有各的一套,往往在这里运行正常,在那里运行就不正常了.于是WD们拆东边补西边,终于能在几个浏览器下都正常了.结果,产品经理又有了新的需求,需要在哪儿哪儿那儿改一下,于是乎,好不容易糊弄好的的纸架子一下子倒塌了,W

发现四种在网页中使用CSS样式表的方法_经验交流

如何在网页中插入CSS  前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式.  1. 链入外部样式表  链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下:  复制代码 代码如下: <head>   --  

提高CSS网页渲染效率的11点注意事项_经验交流

1.十六进制的颜色值对位数与大小写  编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注.在未知情况下不希望冒险而降低了渲染的效率.  * 不赞成 - color:#f3a;  * 建议用 - color:#FF33AA;  2.display与visibility的差异  他们用于设置或检索是否显示对象.display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空

无js5款纯div+css制作的弹出菜单标准_经验交流

DEMOS zero dollars wrapping text styled form active focus shadow boxing image map fun backgrounds fade scrolling em sized images MENUS spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links LAYOUTS Fixed 1 Fix

网页设计布局基础第1/4页_经验交流

正如你现在所看到的一样,网页的布局设计变得越来越重要.访问者不愿意再看到只注重内容的站点.虽然内容很重要,但只有当网页布局和网页内容成功接合时,这种网页或者说站点才是受人喜欢的.取任何一面你都无法留住太过"挑剔"的访问者.   一.网页布局的基本概念  当前1/4页 1234下一页阅读全文

网页编辑中CSS样式表技巧总结_经验交流

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

做网页经常要注意的常识 整理收集_经验交流

背景图片不滚动IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动:  <Body Background="图片文件" bgproperties="fixed">关于onfocus,onblur今天在BI里看到这样的贴子,刚好学习下.<input type="text" size="50" onfocus="this.style.background='none'&quo

用户体验:符合中国国情的网页链接新窗口打开

引子许多可用性专家一直把链接新窗口打开(target="_blank")认为是大忌.在他们看来,新窗口打开的问题在于: 1.用户将无法控制它在本页打开还是新窗口打开.这是不尊重用户的选择. 2.新窗口打开使任务栏更加地拥挤. 3.用户更加期望新页面在当页载入. 4.新窗口打开是"后退"按钮变得不可用. 实际上,在Neil Turner的文章中提到,以下情况可以打开新窗口: 1.链接指向一个文档(PDF,Word文档等) 2.链接指向一个大图片,需要一定时间来下载.