html实现a元素href的URL链接自动刷新或新窗口打开
有时我们想实现这样一个功能,点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面。
这是一个非常好的体验增强功能,可以有效避免浏览器选项卡中打开重复多余的页面。
关键是如何实现呢?
使用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链接自动刷新或新窗口打开的更多相关文章
- 【转载】实现a元素href URL链接自动刷新或新窗口打开
又是我偶像的新文,这个小技巧的用户体验真的非常非常棒! 文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu ...
- 让你的wordpress在新窗口打开链接
在使用wordpress过程中笔者发现还有一些不太完善的地方,没有充分考虑到用户体验.所以,在使用wordpress建博之初,我们有必要对wordpress进行一次小改造,让wordpress更个性. ...
- 如何用CSS实现在新窗口打开链接?
*如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...
- javascript新窗口打开链接window.open()被阻拦的解决办法
场景是ajax提交,比较后端效验数据,需要用户登录,提示后并需要新窗口打开登录的链接,使用window.open(url);往往会被浏览器认为是广告而被拦截. data.url是ajax返回的链接地址 ...
- jquery新窗口打开链接
第一种:下面的代码是针对m35ui这个样式下的a都是在新窗口打开 <script type="text/javascript"> jQuery(document ...
- router-link 返回上页 和 新窗口打开链接
1.如果使用了Vue-router的话,就可以用 this.$router.go(-1) 实现返回: 2.如果没使用vue-router,就可以用 window.history.go(-1) 实现返回 ...
- location.href 本窗口与window.open 新窗口打开用法
二种新窗口打开的区别: window.open("URL",'top'); 只是表示打开这个页面,并不是打开并刷新页面: window.location.href="UR ...
- 网页中<a>标签新窗口和location.href 新窗口打开
在网页制作过程中,经常遇到新窗口打开,一般是a超级链接或者location.href 新窗口打开形式,下面分别讲述两种之间的不同方式 1,a标签 新窗口 添加属性 target="_blan ...
- select中想要加a链接 并且新窗口打开
//新窗口打开 <select id="" onchange="window.open(this.value)"> <option value ...
随机推荐
- 深入了解JVM-方法区
本文首发于微信公众号[猿灯塔],转载引用请说明出处 今天呢!灯塔君跟大家讲: 深入了解JVM-方法区 当JVM使用类装载器装载某个类时,它首先要定位对应的class文件,然后读入这个class文件,最 ...
- 使用centos8搭建僵尸毁灭工程(PZ)服务器
自从领到了阿里云的ECS服务器后,本着既能熟悉linux操作,又能为喜欢的游戏搭建一个可以和朋友一起联机的服务器(游戏提供自建本地服务器极渣)的想法.作为linux小白的我翻遍了网上的资料,用了五天终 ...
- 不懂SpringApplication生命周期事件?那就等于不会Spring Boot嘛
学习方法之少废话:吹牛.装逼.叫大哥. 作者:A哥(YourBatman) 公众号:BAT的乌托邦(ID:BAT-utopia) 文末是否有彩蛋:有 目录 前言 正文 生命周期事件流程图 版本说明: ...
- VS插件 resharper安装破解教程
https://masuit.com/20 ReSharper是一款由jetbrains开发的针对C#, VB.NET, ASP.NET, XML,和XAML的编辑器.沿袭了jetbrains开发工具 ...
- MySQL分库分表的原则
一.分表 当一个表的数据达到几千万条的时候,每一次查询都会花费更长的时间,如果这时候在使用链表查询,那么我想应该会实在那里,那么我们应该如何解决这个问题呢? 1.为什么要分表: 分表的目的就是为了解决 ...
- CSRF原理及防御
CSRF原理及防御 CSRF攻击原理 CSRF攻击利用网站对用户的信任,以用户的身份发送请求来执行攻击者所要的操作,比如:转账.发邮件.修改密码.添加用户等. CSRF和XSS一样危害都特别大,只不过 ...
- java8的parallelStream提升数倍查询效率
业务场景 在很多项目中,都有类似数据汇总的业务场景,查询今日注册会员数,在线会员数,订单总金额,支出总金额等...这些业务通常都不是存在同一张表中,我们需要依次查询出来然后封装成所需要的对象返回给前端 ...
- web 部署专题(三):压力测试(一)工具 siege
1.介绍 Siege是一个压力测试和评测工具,设计用于WEB开发这评估应用在压力下的承受能力:可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访 ...
- 深入浅出AQS源码解析
最近一直在研究AQS的源码,希望可以更深刻的理解AQS的实现原理.虽然网上有很多关于AQS的源码分析,但是看完以后感觉还是一知半解.于是,我将自己的整个理解过程记录下来了,希望对大家有所帮助. 基本原 ...
- bzoj3791作业*
bzoj3791作业 题意: 对一个01序列进行染色,每次能将一个区间染上色(可覆盖之前染的),共能染k次,求最大正确染色个数.n≤100000,m≤50. 题解: 结论:染k次最多能把序列分成2*k ...