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 ...
随机推荐
- 每日一题 - 剑指 Offer 50. 第一个只出现一次的字符
题目信息 时间: 2019-07-03 题目链接:Leetcode tag:哈希表 难易程度:简单 题目描述: 在字符串 s 中找出第一个只出现一次的字符.如果没有,返回一个单空格. s 只包含小写字 ...
- HotSpot的类模型(3)
上一篇 HotSpot的类模型(2) 介绍了类模型的基础类Klass的重要属性及方法,这一篇介绍一下InstanceKlass及InstanceKlass的子类. 2.InstanceKlass类 每 ...
- JS的数据类型你真的懂了吗
一.JS数据类型分类 1.基本数据类型 (1)Number 数字 (2)String 字符串 (3)Boolean 布尔值 (4)null 空对象指针 (5)undefined 为定义 (6)symb ...
- day54 作业
编写代码,将当前日期按"2017-12-27 11:11 星期三"格式输出(提示:switch结构) var date = new Date() ymd = data.toLoca ...
- YAML 语言教程与使用案例
YAML语言教程与使用案例,如何编与读懂写YAML文件. YAML概要 YAML 是 “YAML Ain’t a Markup Language”(YAML 不是一种标记语言)的递归缩写.在开发的这种 ...
- 如何在同一台电脑上部署多个tomcat实现多个tomcat在同一台电脑上同时启动
有时候我们在开发的过程中难免会遇到需要在同一台电脑部署多个tomcat,且还要他们能够都单独同时启动不会对其他的tomcat造成影响 本文就简单记录一下,如何来实现这个骚操作 1. 下载tomcat的 ...
- 数据可视化基础专题(四):Pandas基础(三) mysql导入与导出
转载(有添加.修改)作者:但盼风雨来_jc链接:https://www.jianshu.com/p/238a13995b2b來源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处 ...
- 爬虫01 /jupyter、爬虫概述、requests基本使用
爬虫02 /jupyter.爬虫概述.requests基本使用 目录 爬虫02 /jupyter.爬虫概述.requests基本使用 1. jupyter的基本使用 2. 爬虫概述 3. reques ...
- AcWing 93. 递归实现组合型枚举
AcWing 93. 递归实现组合型枚举 原题链接 从 1~n 这 n 个整数中随机选出 m 个,输出所有可能的选择方案. 输入格式 两个整数 n,m ,在同一行用空格隔开. 输出格式 按照从小到大的 ...
- bzoj2296【POJ Challenge】随机种子*
bzoj2296[POJ Challenge]随机种子 题意: 求一个≤10^16的数,使这个数包含123456789且为x的倍数.x≤1000000. 题解: 16-6刚好等于10.因此我们可以直接 ...