恒昌网络:target 属性怎么用 JS 来控制

  在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;

网站编辑:16iz
分享到:更多
网站是您的网络名片,更是网络营销的基础!恒昌网络将根据您的实际需求,结合我们多年的 网站开发经验,为您提供一站式全程服务:包括域名申请、主机选用(备案)、企业邮箱、设计 开发、维护推广、400电话办理及后续改版升级等,为您创造真正的价值!
全国服务电话:400-096-1600    值班电话:010-62994756
  • 建网站
  • 网站改版
  • 建商城
  • 申请400电话
  • 企业QQ
  • 注册域名
  • 虚拟主机/云主机
  • 企业邮箱问题
  • 网站维护
  • 准备网站推广
  • 其他
  
看不清?点击换一个
 
全国服务热线:400-096-1600    值班电话:010-62994756    邮箱:service#16iz.com(将#替换为@)
Copyright © 2009 - 2017 16iz.com All Rights Reserved.    恒昌网络 版权所有
京ICP备09062123号    京公网安备110108400940号    技术支持:恒昌网络
在线留言