符合Web标准的超链接

web|web标准|链接

  在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题.

  HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.事实上.规范里允许开发人员自由的使用非标准属性值做特定的运用.

  在这里,我们采用一个自定义值external用于rel属性来标记一个链接,用来新开一个窗口.

  不符合最新Web标准的链接代码:

<a href="document.html" target="_blank">external link</a>

  运用rel属性:

<a href="document.html" rel="external">external link</a>

  现在我们构建了一个符合Web标准的新开窗口的链接,我们还需要运用JavaScript是其实现新开窗口.脚本要实现的工作是当网页加载时,找到文档里的所有那些我们定义为rel="external"的超链接.

  首先我们要判断浏览器.

if (!document.getElementsByTagName) return;

  getElementsByTagName是DOM1标准里一个容易使用的方法,且它被现在的大多数浏览器所支持,因为一些旧的浏览器如Netscape 4和IE4不支持DOM1,所以我们必须通过判定这一方法是否存在来排除这些旧版本的浏览器.

  下一步,我们通过getElementsByTagName方法取得文档里所有的<a>标签:

var anchors = document.getElementsByTagName("a");

  anchors被赋值为包含各个<a>标签的数组,现在我们必须遍历各个<a>标签并且修改它:

for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];

  找到要实现新开窗口的<a>标签

if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")

  接下来.建立属性值target并赋值"_target":

anchor.target = "_blank";

  完整的代码:

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;

时间: 2024-11-02 14:01:05

符合Web标准的超链接的相关文章

推荐一些符合web标准的媒体播放器代码

web|web标准|媒体 再见了Embed,一些媒体播放器的符合web标准的代码 由于Embed标签是Netscape的私有财产,故一直未被W3C认可,对于各种媒体文件使用Embed标签是非标准的,如何改变?Elizabeth Castro的 Bye Bye Embed 一文对于各种媒体播放器给出了很好的符合web标准的代码. 在线媒体播放--Google Video and YouTube <object type="application/x-shockwave-flash"

符合web标准的媒体播放器代码

web|web标准|媒体 再见了Embed,一些媒体播放器的符合web标准的代码 由于Embed标签是Netscape的私有财产,故一直未被W3C认可,对于各种媒体文件使用Embed标签是非标准的,如何改变?Elizabeth Castro的 Bye Bye Embed 一文对于各种媒体播放器给出了很好的符合web标准的代码. 在线媒体播放--Google Video and YouTube <object type="application/x-shockwave-flash"

手机网站页面制作更应该符合WEB标准

导读:国内手机网站目前还算是个新鲜事物,相应的手机网站前端开发也并不是特别成熟,对于一个网页设计师来说要做一个手机网站还是会碰到许多问题,本文转载自淘宝 UED,分享如何开发进行手机网站的前端卡发. 从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年.一步步看着手机淘宝从最初的beta版本到今天的样子,感慨良多. 手机网站开发,有着许多不为人知的困难: 一是可参考的资料太少,大部分手机网站都处于起步阶段,很多的时候都是摸着石头过河,而鉴于淘宝自身的特殊性,也使得我们在参考成功案例之余,要

利用JQuery制作符合Web标准的QQ弹出消息

 本篇文章主要介绍了利用JQuery制作符合Web标准的QQ弹出消息.这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画 这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画,感觉这个自定义动画就是像flash里的形状和渐变动画一样,只要定义了开头和结尾的两个关键帧,中间的动画过程会自动完成,不用会jQuery的可去查下jQuery的帮助文档.    基本思路是这样子滴:首先弹出消息框其实就是一个div层,页面

符合web标准的网页中调用Flash的方法

常有网友提问,如何让网页中嵌入的Flash标签也符合web标准.目前还没有一个完美的解决办法,这篇文章中,我们将Flash嵌入标签写入js文件中,通过变量传递参数的办法来回避不符合标准的标签. 请注意,这只是一个变通的方法,换汤不换药,并未能最终解决存在的问题,通过验证只是一种表象,这样的思路是不是可取,在实际操作中请大家自行斟酌. 首先建立一个JS文件flash.js.写入如下代码: function swf(file,w,h) {     document.write('<object cl

符合web标准的媒体播放器代码_网页播放器

由于Embed标签是Netscape的私有财产,故一直未被W3C认可,对于各种媒体文件使用Embed标签是非标准的,如何改变?Elizabeth Castro的 Bye Bye Embed 一文对于各种媒体播放器给出了很好的符合web标准的代码.FLash文件 复制代码 代码如下: <object type="application/x-shockwave-flash"    data="http://video.google.com/googleplayer.swf?

学习一种符合WEB标准的导航菜单例子

web|web标准|菜单|导航 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css菜单演示</title><style type=

CSS制作的符合WEB标准的下拉导航菜单

css|web|web标准|菜单|导航|下拉 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css菜单演示</title><styl

符合Web标准!CSS同比例缩小图片

css|web|web标准 当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳. 把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 对于IE 6.0及以下版本,以上两条CSS属性均不会被理会.之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件.例如: Example Source Code <imgsrc=".