需求场景

客户希望实现这样一个场景:点击一个超链接,利用新窗口打开链接页面。
但是当链接窗口已经被打开时,这是就不能弹新窗口,必须在这个链接已打开的窗口进行页面刷新。
这确实是一个非常好的体验增强功能,特殊页面在列表打开详情页时可以利用,有效减少了浏览器选项卡中打开重复多余的页面。

关键在于,如何实现此功能呢?

html定时打开新链接web前端tipshtml中若何实现a标签href新窗口 URL链接主动刷新 Node.js
(图片来自网络侵删)

实在很大略,一说就懂一点就通,HTML本身的特性就可以办理这样的功能需求。

a标签target属性

常日,进行页面新窗口打开跳转,我们利用<a>标签即可实现。
<a>标签可以通过设置target的值来掌握此链接的打开办法,一样平常可取以下值:

_self:默认值,链接在当前窗口打开_blank:链接在新窗口打开_parent:链接在父级框架窗口打开_top:链接在全体窗口打开上面几个属性,基本都是很常见的target属性。
然而,要实现本文开头所说的功能需求,上面这几个值是无法实现的。
当然,target还有一个隐蔽特性,那便是可以指定为详细的URL地址或者任意自定义的名称。
例如:

<ahref="demo.html"target="demo.html">demo空缺页</a>

点击上述标签,当浏览器没有标签页的地址是demo.html时,这时游览器表现为打开一个新页面,地址为demo.html(此时的target属性的行为表现类似'_blank'),当我们再次点击时,由于现在浏览器标签页已经有一个地址为demo.html的页面了,这时游览器表现为不会打开新窗口,而是直接刷新已经打开的demo.html。

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

思考

如果我们想要不同链接,打开同一个标签卡页面刷新如何实现捏?

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

结语

牵手 持续为你分享各种知识和软件 ,欢迎访问、关注、谈论 并留下你确当心心❤