用javascript来控制 链接的target 属性的代码

在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; 
}
找到要实现新开窗口的<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;  
                 if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")  
                             anchor.target = "_blank";  
         }  
}  
window.onload = externalLinks;

赞 (0)

相关推荐

  • JavaScript中常用的验证reg

    不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && R

  • JavaScript获得表单target属性的方法

    本文实例讲述了JavaScript获得表单target属性的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.asp" target="_blank"> First name: <input type="text" name="fnam

  • JS target与currentTarget区别说明

    复制代码 代码如下: <div id="outer" style="background:#099"> click outer <p id="inner" style="background:#9C0">click inner</p> <br> </div> <script type="text/javascript"> functio

  • javascript currentTarget对象介绍

    javascript currentTarget对象介绍

    var show = function (e) { /* 这样按下鼠标由于onclick事件是由冒泡触发的,所以event.srcElement || event.target是IMG对象,而不是A对象 IE解决方法是当前获得焦点的对象即document.activeElement,则FF和OP是event.currentTarget对象 具体代码如下 */ alert((e.currentTarget || document.activeElement).tagName); }; [Ctrl+

  • JavaScript replace(rgExp,fn)正则替换的用法

    代码如下: 复制代码 代码如下: var rxhtmlTag = /(<([\w:]+)[^>]*?)\/>/g, rselfClosing = /^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i, fcloseTag = function(all, front, tag) { return rselfClosing.test(tag) ? all : front + "></" + tag +

  • js 有框架页面跳转(target)三种情况下的应用

    1.跳出框架,在父页面. jsp: 复制代码 代码如下: <script language="javascript"> window.parent.frames.location.href="../welcome.en" </script> java: 复制代码 代码如下: PrintWriter out = response.getWriter(); out.write("<script type='text/javascr

  • 用javascript来控制 链接的target 属性的代码

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

  • 用AS控制MC的倾斜属性的代码

    在FLASH里,MC的倾斜属性可以通过手动的办法来设定.在FLASH里,倾斜是实现3D效果的重要方面. 但是AS里头就没有倾斜属性的代码,尽管现在模拟3D的代码已经有很多人做出来,但是目前一般都是局限在坐标点的模拟方面.对于物体,位图的简单3D效果,哪怕就一个倾斜,AS都还没能做到. 为了解决这个问题(这问题,经典里一位用户也曾问过),本人花了近一周的时间来研究: 废话少说,还是转入正题吧. 1一个简单的试验: 在FLASH里,画一个矩形(不要转成元件),然后把该矩形稍作旋转. 接着把转了的矩形

  • Javascript获取标签ID改变style属性的代码

    实例JavaScript代码 下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了. 复制代码 代码如下: <script type="text/javascript"> var d = document.getElementById("d"); function setProperty(){ var set = document.getElemen

  • javascript轻松控制表格列样式的脚本代码

    第一列 第二列 第3列 第一列 第二列 第3列 var obj=document.getElementById("tab").getElementsByTagName("TD") var n=3;//列数 for (var i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript控制Div层透明属性由浅变深由深变浅逐渐显示

    搬运的留着以后自己看! 复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果 代码支持IE6.7.8/firefox/Chrome浏览器 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • 用好href的target属性

    众所周知,href的target有四个属性,分别是:_blank,_self,_parent,_top,这四个各自代表的意思也不多说了,网上一搜一大片,这里想说的是,通过给target属性一个特定的名字,有时会有不错的效果,比如下面的一段代码 yahoo google sina blueidea [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 给target属性命名为my_tar,当点击链接的时候,如果没有名为my_tar的窗口,则新建一个,否则就在已经存在的名为my_tar的窗口中

  • JavaScript常用对象的方法和属性小结

    本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩的网页.在这一部分里,我们将介绍到如何使用与串对象有关的方法和属性. 1.串对象的length属性 串对象仅有一个属性length,这个属性值表示这个串所包括字符的相对数目.语法为: stringName.length 2.串对象的方法 JavaScript提供了多个串方法以帮助控制显示信息.串方法可以分为几个大类,如属性方

  • jQuery实现查找链接文字替换属性的方法

    本文实例讲述了jQuery实现查找链接文字替换属性的方法,分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • JavaScript实现打开链接页面的方式汇总

    在页面中的链接除了常规的方式以外,如果使用javascript,还有很多种方式,下面是一些使用javascript,打开链接的几种方式: 1.使用window的open方法打开链接,这里可是在制定页面中打开链接,也可以定制打开页面的尺寸等等. <a href="javascript:window.open('http://www.google.com','_self') "> open a link 1</a><br/> 2.使用document.U

随机推荐