这篇文章发布于 2019年10月13日,星期日,23:52,归类于 JS实例。 阅读 40356 次, 今日 5 次 22 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8994
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
一、需求描述
希望实现这样一个功能:点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面。
这是一个非常好的体验增强功能,可以有效避免浏览器选项卡中打开重复多余的页面。
关键是如何实现呢?
其实很简单,并不需要JS的参与,HTML本身特性就可以实现这样的需求。
二、你可能不知道的target属性特性
无论是<a>
链接元素还是<form>
表单元素都有一个名叫target
的属性,支持的值包括下面这些:
_self
:默认值。当前浏览器上下文。_blank
:通常是一个新的标签页,但是用户可以配置浏览器,是否在新窗口打开。_parent
:当前浏览器上下文的的父级上下文,如果没有父级,则行为类似_self
。_top
:最顶级的浏览器上下文。如果没有祖先上下文环境,则行为类似_self
.
几乎所有的文档都是上面这样的描述。
但是实际上,target
还有一个隐藏特性,那就是可以指定为具体的URL地址或者任意自定义的名称。
例如:
<a href="blank.html" target="blank.html">空白页</a>
此时,如果浏览器已经有标签页的地址是blank.html,则点击上面的链接并不会打开新窗口,是直接刷新已经打开的blank.html;如果浏览器中没有地址是blank.html的标签页,则此时target
属性的行为表现类似'_blank'
。
也就是说,我们要想实现链接地址自动刷新和新窗口打开的这个需求,知道设置链接元素和表单元素的target
属性值为目标URL地址值就好了。
您可以狠狠地点击这里:链接新窗口打开或者刷新demo
点击任意这几个链接,可以体验效果。
可以看到,target="blank.html?s=1"
和target="blank.html?s=2"
会认为是两个独立的页面,不会互相刷新。因此,如果想要实现所有的搜索结果页都使用一个标签页选项卡,需要使用其他办法,很简单,指定为相同的值即可,例如:
<a href="blank.html?s=1" target="_search">空白页?s=1</a> <a href="blank.html?s=2" target="_search">空白页?s=2</a>
三、结束语
要想实现<a>
元素href
链接自动刷新或新窗口打开的功能,只需要设置target
属性值和href
属性值一样就好了。
这个特性IE浏览器,Firefox浏览器,以及Chrome浏览器都是支持的,放心使用。
由于老备案凉了,目前网站架在香港主机上,所以访问速度可能略微有些慢,等老备案注销新备案成功,会恢复,可能要3周时间。
为了少点迁移麻烦,所以本月更新内容不会频繁。
最后,安利下,我的新书《CSS选择器世界》签名版淘宝也可以购买了。
感谢支持!
本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,永不过期,而且还会及时更新知识点以及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8994
(本篇完)
- HTML rel属性值释义大全 (0.303)
- URL锚点HTML定位技术机制、应用与问题 (0.222)
- 如何实现页面刷新后不定位到之前的滚动位置? (0.222)
- 如何使用JS把相对地址变成绝对地址? (0.203)
- 一言难尽的registerProtocolHandler()方法 (0.148)
- jQuery-马化腾产品设计与用户体验的一些技术实现 (0.055)
- 翻译 - 逐渐消失的Flash网站 (0.055)
- 翻译:慢点更好-为何排序比速度更重要? (0.055)
- 小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现 (0.055)
- 5分钟快速了解下CSS4 color-adjust属性 (0.055)
- 小tip:iframe高度动态自适应 (RANDOM - 0.049)
学到了!!
HTML ifream 框架常用这个a target 属性
我现在有个商品编辑页面,href 传过去了商品 id; 但是我第二次编辑其它商品,确实只打开了原来的窗口,但是页面并未刷新(显示上次商品的详细信息),需要手动刷新,才能显示本次商品的信息。
感谢!解决了我头疼的一个刷新小困惑
学到了!
研究的够精细的,厉害 ????
厉害了
想知道作者怎么知道的
target=’view_window’也可以实现,
其效果等于忽略了查询参数
这玩意儿要说的话得从大家用frameset frame写页面的时候说起了
https://www.w3.org/TR/html4/present/frames.html#h-16.3
学到了。
不过并非文档并非没有写清楚。
就拿 mdn 的:
> Where to display the linked URL, as the name for a browsing context (a tab, window, or ). The following keywords have special meanings for where to load the URL:
那几个不过是特殊的而已。
而且 browsing context 的 name 就是 window.name
403了
我曾经错把_blank打错了,然后对这个属性有一些猜测,没有深入探究,今天终于被证实了
666,还能这么玩
最早是在优酷上面发现这个特性的,他是taget=”video”,然后就用在项目里面了,特别好用。
请问怎么用?
如果想要实现所有的搜索结果页都使用一个标签页选项卡,需要想想其他办法
很简单,把target设成任意一个一样的字符串即可。target不一定要设成url或内置的那4个,可以是任意字符串。
demo试了不行,target去掉参数可以了
这个特性有一种蓦然回首的感觉
学到了,太实用了
深夜学到了