有时我们想实现这样一个功能,点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面。

这是一个非常好的体验增强功能,可以有效避免浏览器选项卡中打开重复多余的页面。

关键是如何实现呢?

使用a标签的target属性特性:

无论是a链接元素还是form表单元素都有一个名叫target的属性,支持的值包括下面这些:

  • _self:默认值。当前浏览器上下文。
  • _blank:通常是一个新的标签页,但是用户可以配置浏览器,是否在新窗口打开。
  • _parent:当前浏览器上下文的的父级上下文,如果没有父级,则行为类似_self。
  • _top:最顶级的浏览器上下文。如果没有祖先上下文环境,则行为类似_self。

实际上,target还有一个隐藏特性,那就是可以指定为具体的URL地址或者任意自定义的名称。

例如:

<a href="http://www.baidu.com" target="http://www.baidu.com">空白页</a>

此时,如果浏览器已经有标签页的地址是blank.html,则点击上面的链接并不会打开新窗口,是直接刷新已经打开的blank.html;如果浏览器中没有地址是blank.html的标签页,则此时target属性的行为表现类似'_blank'。

也就是说,我们要想实现链接地址自动刷新和新窗口打开的这个需求,知道设置链接元素和表单元素的target属性值为目标URL地址值就好了。

因此,如果想要实现所有的搜索结果页都使用一个标签页选项卡,需要使用其他办法,很简单,指定为相同的值即可,例如:

<a href="blank.html?s=1" target="_search">空白页?s=1</a>
<a href="blank.html?s=2" target="_search">空白页?s=2</a>

可以看到,href="blank.html?s=1"和href="blank.html?s=2"会指向同一个页面,不会打开俩个新窗口。

要想实现a元素href链接自动刷新或新窗口打开的功能,只需要设置target属性值和href属性值一样就好了。

这个特性IE浏览器,Firefox浏览器,以及Chrome浏览器都是支持的,放心使用。

html实现a元素href的URL链接自动刷新或新窗口打开的更多相关文章

  1. 【转载】实现a元素href URL链接自动刷新或新窗口打开

    又是我偶像的新文,这个小技巧的用户体验真的非常非常棒! 文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu ...

  2. 让你的wordpress在新窗口打开链接

    在使用wordpress过程中笔者发现还有一些不太完善的地方,没有充分考虑到用户体验.所以,在使用wordpress建博之初,我们有必要对wordpress进行一次小改造,让wordpress更个性. ...

  3. 如何用CSS实现在新窗口打开链接?

    *如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...

  4. javascript新窗口打开链接window.open()被阻拦的解决办法

    场景是ajax提交,比较后端效验数据,需要用户登录,提示后并需要新窗口打开登录的链接,使用window.open(url);往往会被浏览器认为是广告而被拦截. data.url是ajax返回的链接地址 ...

  5. jquery新窗口打开链接

    第一种:下面的代码是针对m35ui这个样式下的a都是在新窗口打开    <script type="text/javascript">  jQuery(document ...

  6. router-link 返回上页 和 新窗口打开链接

    1.如果使用了Vue-router的话,就可以用 this.$router.go(-1) 实现返回: 2.如果没使用vue-router,就可以用 window.history.go(-1) 实现返回 ...

  7. location.href 本窗口与window.open 新窗口打开用法

    二种新窗口打开的区别: window.open("URL",'top'); 只是表示打开这个页面,并不是打开并刷新页面: window.location.href="UR ...

  8. 网页中<a>标签新窗口和location.href 新窗口打开

    在网页制作过程中,经常遇到新窗口打开,一般是a超级链接或者location.href 新窗口打开形式,下面分别讲述两种之间的不同方式 1,a标签 新窗口 添加属性 target="_blan ...

  9. select中想要加a链接 并且新窗口打开

    //新窗口打开 <select id="" onchange="window.open(this.value)"> <option value ...

随机推荐

  1. Wooden Stricks——两个递增条件的线性DP

    题目 一堆n根木棍.每个棒的长度和重量是预先已知的.这些木棒将由木工机械一一加工.机器需要准备一些时间(称为准备时间)来准备处理木棍.设置时间与清洁操作以及更换机器中的工具和形状有关.木工机械的准备时 ...

  2. 常见Python的Web开发框架

    在今天,Python里有很多开发框架用来帮助你轻松创建web应用.web开发框架存在的意义就在于可以快速便捷的构建应用,而不用去在意那些没必要的技术细节(协议.报文.数据结构). 到2020年为止,基 ...

  3. Chive CTF 2020 - Tiki

    题目状态: OPEN - 正在试图解这道题CLOSED - 这道题还没有打开SOLVED - 解决了!鼓掌撒花! 赛事信息: 起止时间:2020-04-09 01:00 ~ 2020-04-12 01 ...

  4. MYSQL 之 JDBC(十七): 调用函数&存储过程

    1.通过Connection对象的prepareCall()方法创建一个CallableStatement对象的实例.在使用Connection对象的preparedCall()方法时,需要传入一个S ...

  5. python 并发专题(十二):基础部分补充(四)协程

    相关概念: 协程:一个线程并发的处理任务 串行:一个线程执行一个任务,执行完毕之后,执行下一个任务 并行:多个CPU执行多个任务,4个CPU执行4个任务 并发:一个CPU执行多个任务,看起来像是同时执 ...

  6. redis(八):Redis 哈希(Hash)

    Redis 哈希(Hash) Redis hash 是一个 string 类型的 field 和 value 的映射表,hash 特别适合用于存储对象. Redis 中每个 hash 可以存储 232 ...

  7. 数据可视化实例(十二): 发散型条形图 (matplotlib,pandas)

    https://datawhalechina.github.io/pms50/#/chapter10/chapter10 如果您想根据单个指标查看项目的变化情况,并可视化此差异的顺序和数量,那么散型条 ...

  8. Ethical Hacking - GAINING ACCESS(23)

    CLIENT SIDE ATTACK - BeEF Framework Hooking targets using MITMF Tools: MITMF and BeEF Start BeEF and ...

  9. 实践使用nodejs获取用户真实IP?

    先上代码 var http = require('http') var server = http.createServer(function (req,res) { console.log(req. ...

  10. two types of friend

    两类朋友 第一类,普通朋友,并不能分享一些隐私的感情,只能说一些事情,有一些只是认识的人或者虽然认识很多年但是也只能是这样的! 第二类,关心你,可以交流感清,明显更加亲密一点. 不要对第一类朋友说第二 ...