I Love China

技术·人生

技术服务生活
繁體
8月 7th, 2007

增加了网址在新窗口中打开的功能-使用javascript实现

[摘要]：wordpress里很多链接是默认在本窗口中打开，而我大多数时候更喜欢在新窗口中打开链接，为了能在需要的时候在新窗口中打开而又不用点了右键再选在新选项卡中打开，就决定用JavaScript更改一下链接。主要用的是getElementsByTagName、insertBefore、appendChild、createElement这些方法。如果不熟悉的建议看下w3c关于DOM(文档对象模型)的说明。
[思路]:首先获取网页中所有的tagName为a的Element,设其为aSet集合(其实是一个NodeList)。然后遍历里面每个Element，设为aElem,需要实现的是在与aElem同级下添加新的Element节点，设需要添加的节点为newAElem,它的tagName也是a,href同aElem,target要为”_blank”,title就设为”Open in new window”,另外为了醒目，再加上一副图片。大体就这样，下面是代码：

JavaScript Code:
  1. /* +++++++++++++++++++++++++++++++++++
  2.     copyright : spark.fandlr
  3.     E_mail : spark.fandlr[AT]gmail.com
  4.     site : http://4nothing.net/blog
  5.     2007-08-07
  6.     +++++++++++++++++++++++++++++++++++*/
  7. function dealAnchor()
  8. {
  9.     var anchorSet = document.getElementsByTagName("a");
  10.     var anchorLen = anchorSet.length;
  11.     if(anchorLen == 0)
  12.     {
  13.         return;
  14.     }
  15.     for(var i = 0;i < anchorLen; i++)
  16.     {
  17.         appendNewWindow(anchorSet[i*2]);       
  18.     }
  19. }
  20. function appendNewWindow(elem)
  21. {
  22.     if(elem == null)
  23.     {
  24.        
  25.         return;
  26.     }
  27.     if(elem.href == null || elem.href == "" || elem.target == "_blank" || elem.href.substr(0,10) == "javascript" || elem.href.substr(0,7) == "mailto:")
  28.     {
  29.         return;
  30.     }
  31.     var pNode = elem.parentNode;
  32.     if(pNode == null)
  33.     {
  34.        
  35.         return;
  36.     }
  37.    
  38.     var newWNode = document.createElement("a");
  39.     newWNode.target = "_blank";
  40.     newWNode.href = elem.href;
  41.     newWNode.style.backgroundColor = "transparent";
  42.     newWNode.title = "Open in new window";
  43.     var imgNode = document.createElement("img");
  44.     imgNode.src = "/images/new_window_icon.gif";
  45.     imgNode.border = 0;
  46.     imgNode.width = 11;
  47.     imgNode.height = 9;
  48.     //imgNode.style.cssText= "BACKGROUND-COLOR: transparent";
  49.     newWNode.appendChild(imgNode);
  50.     var txtNode = document.createTextNode(" ");
  51.     var nextNode = elem.nextSibling;
  52.     try{
  53.         pNode.insertBefore(txtNode,nextNode);
  54.         pNode.insertBefore(newWNode,nextNode);
  55.     }
  56.     catch(e)
  57.     {
  58.         //alert(e);   
  59.     }
  60. }
  61. var agt = navigator.userAgent.toLowerCase();
  62. if(agt.indexOf('msie')!=-1 && document.all &&
  63. agt.indexOf('opera')==-1 && agt.indexOf('mac')==-1)
  64. {
  65.    
  66.     window.attachEvent('onload',dealAnchor);
  67. }
  68. else
  69. {
  70.     window.addEventListener('load',dealAnchor,false);
  71. }

Posted in Internet体验, JavaScript |

This entry was posted on 星期二, 8月 7th, 2007 at 11:17 下午 and is filed under Internet体验, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

随机文章：

1条评论 to “增加了网址在新窗口中打开的功能-使用javascript实现”

  1. jeff 说:
    8月 8th, 2007 at 9:29 下午

    呵呵，自食其力丰衣足食。

Leave a Reply