阅读更多

1顶
1踩

Web前端

原创新闻 谈新窗口打开链接的合理方式

2014-10-08 15:49 by 见习记者 xueyou 评论(0) 有9920人浏览

如果标题换做“用户体验”,感觉大了些,自己毕竟不是这方面的专家,在这里只是谈谈自己的感受。

我还记得很早的时候自己学做网页制作,那时不晓得链接如何从新窗口打开,也不关心这些,因为网页 只是起到一个宣传简介的作用,后来多了友情链接这个东东,是的,那时还没有多标签多选项卡的浏览器出现,大家都用着IE6之类的窗口浏览器,于是那时候大 家养成了个习惯,就是打开一个页面,等浏览结束后下意识的去关浏览窗口,岂不知这个页面的上一页自己也需要,或者网站作者并不希望浏览者点了外部链接后就 脱离自己的网站,因为站长们认为自己网站还有更精彩的浏览者并没有发现……前端UI框架分享

正是由于这些原因,于是广大站长纷纷采用了外部链接的新窗口打开的模式,新窗口打开,无非就是采用JavaScript的window.open办法或者target=”_blank”的方法,由于后者不需要脚本支持所以实际采用多一些。这样以来似乎已经很完美了,真的是这样吗?这些网站继续培养了浏览者盲目按×关闭窗口的习惯,或许他们应该尝试着新的方式那就是按Shift加鼠标左键新窗口打开网页。

终于有一天新的标准XHTML 1.0出现了,广大站长纷纷发现原来的target=”_blank”不能通过标准了,于是大家开始思考:“我们到底做错了什么?”。我们到底做错了什么?大家可以参考这篇 《_blank开新窗口不符合标准?》大 家应该知道是怎么回事了,不加限制的开新窗口说到底是剥夺了用户的选择权,用户有权利选择是原窗口打开还是新窗口打开,我们必须将设计由以自我为中心转变 为以用户为中心,为用户考虑,但是话又说回来了,在中国这种新窗口打开的模式挺符合国情的,大家都默认并习惯了,当你把选择权交给用户时,用户突然变得不 知所措,甚至会怪罪于你的设计,你明明是为用户想的,偏偏用户不领情。

那我们究竟还要不要新开窗口,有没有比较好的做法?至少我认为MSDN的做法是值得我们借鉴的,MSDN在外部链接的旁边放置了个小图标标示着这个链接是个外部链接,但是实际还是本窗口打开的。



我们何不把这个小图标利用起来,也就是说点击链接是本窗口打开,点击旁边的小图标就新窗口打开,这样貌似这个问题到这里就合理解决了,这个解决方案很早就有了,也是我认为比较好的一个办法,当然大家如果有什么更好的方法可以和我讨论。前端UI框架分享

附加贴上自动识别并加上外部链接图标的JavaScript代码:

(function (){
var window = this, undefined;
     
function addListener(element, e, fn) {
    if (element.addEventListener) {
        element.addEventListener(e, fn, false);
    } else {
        element.attachEvent("on" + e, fn);
    }
}
     
var outlinks =  {
  protocol : /^(?:http|https|ftp|mms):(?:\/\/|\\\\)/i,
  local_url : location.hostname, // 获取本地域名
  icon : 'outlink.png', // 请改成自己的图标路径
     
  set : function(obj, list) {
    for (var i = 0; i < list.length; i++) {
      obj.setAttribute(list[i][0], list[i][1]);
    }
  },
  create : function(anchor) {
    var space = document.createTextNode(' '),
      link = document.createElement('a'),
      img = document.createElement('img'),
      text = '新窗口打开';
     
    outlinks.set(link, [['href', anchor.href],
              ['target', '_blank'],
              ['title', text]]);
    outlinks.set(img, [['alt', text],
              ['src', outlinks.icon],
              ['height', 13],
              ['width', 13],
              ['border', 0]]);
    img.style.verticalAlign='middle';
    link.style.background = 'none';
    link.style.margin = '0';
    link.style.padding = '0';
    img.style.margin = '0';
    img.style.padding = '0';
    link.appendChild(img);
    anchor.parentNode.insertBefore(space,
                    anchor.nextSibling);
        anchor.parentNode.insertBefore(link,
                    anchor.nextSibling
                    .nextSibling);
  },
     
  init : function() {
    try {
      var anchor,
        anchors = document.getElementsByTagName('a');
      for (var i=0; i<anchors.length; i++) {
        anchor = anchors[i];
        if (
          anchor.href &&
          // 跳过加了链接的图片
          !anchor.getElementsByTagName('img')[0] &&
          outlinks.protocol.test(anchor.href) &&
          !anchor.getAttribute('target') &&
          anchor.href.indexOf(outlinks.local_url) < 0) {
            outlinks.create(anchor);
        }
    }
    }catch(e) { alert(e.message);}
  }
}
     
addListener(window, 'load', outlinks.init);
     
})();

 

  • 大小: 2.7 KB
1
1
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 模块开发卷宗(GB8567——88)

    模块开发卷宗(GB8567——88) 1标题 软件系统名称和标识符 模块名称和标识符(如果本卷宗包含多于一个的模块,则用这组模块的功能标识代替模块名) 程序编制员签名 卷宗的修改文本序号 修改完成日期 卷宗序号(说明本卷宗在整个卷宗中的序号) 编排日期(说明整个卷宗最近的一次编排日期) 2模块开发情况表 3功能说明 扼要说明本模块(或本组模块)的功能,主要是输入、要求的处理、...

  • 软件文档写作之模块开发卷宗模板.doc

    内容详细介绍了软件文档写作中模块开发卷宗的模板

  • 软件项目模板-模块开发卷宗.zip

    内容真实可靠欢迎随时下载

  • 软件开发-模块开发卷宗

    扼要说明本模块(或本组模块)的功能,主要是输入、要求的处理、输出。可以从系统设计说明书摘录。同时列出在软件需求说明书中对这些功能的说明的章、条、款。

  • 模块开发卷宗

      (转载自国家计算机标准和文件模板) 1 标题   软件系统名称和标识符   模块名称和标识符(如果本卷宗包含多于一个的模块,则用这组模块的功能标识代替模块名)  程序编制员签名  卷宗的修改文本序号  修改完成日期   卷宗序号(说明本卷宗在整个卷宗中的序号)  编排日期(说明整个卷宗最近的一次编排日期)2 模块开发情况表 3 功能说明   扼要说明本模块(或本组模块)的功能,主要是输入、要求...

  • 7-模块开发卷宗.doc

    文档参考学习使用,适用于相关专业写设计与说明书使用。

  • 模块开发卷宗(GB8567-88)

    模块开发卷宗(GB8567-88)简洁、实用的特性,相信能够为大家利用人力、物力、财力、资源等带来许多帮助...该文档为模块开发卷宗(GB8567-88),是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载看看

  • 对模块开发卷宗的理解_【设计思维】&quot;真&quot;模块化根本就不需要读源码!...

      对很多人来,嵌入式软件开发过程中模块化(Modularization)是一个海市蜃楼、是一个书面词汇、是一个过气的时尚——模块化似乎从未真正的实现过。吹牛时人们常不屑的说:没吃过猪肉,但还没看过猪跑么?事实上,如果讨论的对象是嵌入式软件,很多人可能真的没有看过猪跑。在话题变得更像都市传说的之前,我想问一个问题:为什么要模块化?有经验的人会说:为了代码复用(Code Reuse)进一...

  • [转]软件开发规范—模块开发卷宗(GB8567——88)

    做软件开发是有那么一套国准可参照的,当然就是那些文档了,这里列出一下所有软件开发的规范文档: 操作手册 用户手册 软件质量保证计划 软件需求说明书 概要设计说明书 开发进度月报 测试计划文档 测试分析报告 数据库设计说明书 软件配置管理计划 模块开发卷宗 详细设计说明书 项目开发总结报告 我现在再做的东西是数据库设计说明书,两天前才写玩模块开发卷宗,那时候在网上...

  • 模块开发卷宗(GB8567——88).doc

    模块开发卷宗(GB8567——88).doc模块开发卷宗(GB8567——88).doc模块开发卷宗(GB8567——88).doc模块开发卷宗(GB8567——88).doc模块开发卷宗(GB8567——88).doc模块开发卷宗(GB8567——88).doc模块开发卷宗(GB8567——88).doc模块开发卷宗(GB8567——88).doc

  • 软开开发文档汇集(模块开发卷宗、可行性研究报告、测试分析报告等等)

    包含:测试计划.doc、测试分析报告.doc、概要设计说明书.doc、开发进度月报.doc、可行性研究报告(GB8567——88).doc、 模块开发卷宗.doc、软件需求说明书(GB856T——88).doc、数据库设计说明书.doc、文件给制实施规定.doc、 项目开发总结报告(GB8567——88).doc、用户手册(GB8567——88).doc、结构.doc等等...,可用于开发文档参考..

  • 模块开发卷宗编写规范

    扼要说明本模块(或本组模块)的功能,主要是输入、要求的处理、输出。可以从系统设计说明书摘录。同时列出在软件需求说明书中对这些功能的说明的章、条、款。

  • 对模块开发卷宗的理解_火爆开发概念之——微服务实践篇

    什么是微服务?目前,后端开发比较火爆的概念就是微服务,微服务是软件领域现阶段无人不提的话题,也是未来的一个发展方向。然而,据调查和了解,很多开发者将微服务下的单体应用和SOA(面向服务架构)服务治理下的单体应用混为一谈,认为二者是一样的模式,大量的系统在十几年前都已经是以SOA为基础的分布式系统了,那么微服务作为新的架构标准与SOA有什么差异点呢?其本质区别在于设计原理,微服务是去中心化设计,SO...

  • 对模块开发卷宗的理解_软件开发,你必须要知道的8大流程-云智海联

    互联网蓝海经济一直在发展,而我们企业的发展离不开互联网门户,因此很多企业都想在互联网中,用软件来展示企业的优势及服务项目,那么在制作软件中有哪些问题呢,下面就由云智海联为大家讲解一下,在互联网软件发开的中,需要避免的一些问题和正规的项目流程:1、首先制定项目计划,最初计划是里程碑性质的。可以先按瀑布模型设置,里程碑点主要为需求评审、设计评审、经过代码开发和单元测试后进行集成测试、部署上线是一个很重...

  • 毕业设计&课设_CUMT 信息安全专业毕业设计:基于区块链的能源交易系统,含架构、部署等多方面详细介绍.zip

    毕业设计&课设_CUMT 信息安全专业毕业设计:基于区块链的能源交易系统,含架构、部署等多方面详细介绍.zip

  • 用Python分析文本数据项目

    用Python分析文本数据项目

Global site tag (gtag.js) - Google Analytics